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

Question

我正在尝试使用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”已动态添加的两个隐藏字段。

Answer 1

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

即

<select id"s2">

改成

<select id="s2">

Answer 2

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 
        }
    });
})

希望那是有用的。 杜克兰（Dukeland）也有一个很好的观点。