HTML 表单中的多个动态添加的输入

Multiple Dynamically-Added Inputs in HTML Form

本文关键字：动态 添加 输入 表单 HTML      更新时间：2023-09-26

我正在尝试使用 JavaScript 添加隐藏的输入字段，但我确实/没有达到预期的结果。

我想在用户从下拉列表中选择值时向表单添加隐藏字段。此页面和其他类似页面中的下拉列表数量不同，可能更多或更少。

当用户从第一个下拉列表中选择值时，我想添加许多隐藏字段，

如果他从另一个下拉列表中选择另一个值，我想添加其他隐藏字段，并保存所有隐藏字段的值。

例：

<select id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

如果用户选择"2"，我想添加 2 个隐藏字段：

<select id="s2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

如果用户在第二个列表中选择"3"，我想添加三个额外的隐藏字段，但保存（保留）之前已经使用"s1"动态添加的两个隐藏字段。

老

实说，我不知道你在问什么...但快速解决方法可能是对 HTML 使用正确的语法。

即

<select id"s2">

更改为

<select id="s2">

jQuery具有非常有用的change（）函数。 所以你可以写这样的东西：

$(document).ready(function(){
    $("#s1").change(function(){
        var field_value = $(this).val();
        // then perhaps:
        for(i = 0; i < field_value; i++){
        }
        // or
        if(field_value == 2){
             // do something 
        }
    });
})

希望这有一些用处。 杜克兰在上面也有一个非常好的观点。

相关文章：