Question

我有一个表单，其中包含一个选择下拉列表和一个输入框。除非从下拉列表中选择“其他”选项，否则应隐藏输入框。

我的问题是有一个按钮，可以克隆此代码，并创建其他副本。

我不知道如何在JS中管理只显示与选择下拉列表相关的输入框，因为我无法对它们进行编号，因为它不是静态的。它甚至可以是10或只是1。

    <div class="col-md-4">
        <select name="diet[]" class="form-control diet"> 
            <option value="None">Dietary Requirements</option>
            <option >None</option>
            <option >Vegetarian</option>
            <option >Gluten Free</option>
            <option >Lactose Free</option>
            <option >Kosher</option>
            <option value="other">Other (specify below)</option>
        </select>
        <input  type="text" name="otherdiet[]" class="form-control diet" placeholder="Please Specify here" style="margin-right:0;">
    </div>
<div class="col-md-4">
    <select name="diet[]" class="form-control diet"> 
        <option value="None">Dietary Requirements</option>
        <option >None</option>
        <option >Vegetarian</option>
        <option >Gluten Free</option>
        <option >Lactose Free</option>
        <option >Kosher</option>
        <option value="other">Other (specify below)</option>
    </select>
    <input  type="text" name="otherdiet[]" class="form-control diet" placeholder="Please Specify here" style="margin-right:0;">
</div>

Answer 1

通过将onChange事件处理程序绑定到选择字段来开始。然后检查＆＃39;其他＆＃39;选项已被选中或其他。如果＆＃39;其他＆＃39;选择了选项，将输入添加到父元素。如果选择了其他选项，则查看输入是否存在，如果存在，则将其删除。

jQuery('form').on('change', 'select.form-control', function() {
    if (this.value == 'other') {

        // In here you could check for a certain class on the select button
        // e.g. if (jQuery(this).hasClass('diet'))

        var input = jQuery("<input>")
            .attr("type", "text")
            .attr('name', 'otherdiet[]')
            .attr('placeholder', 'Please specify here')
            .addClass('form-control diet');

        jQuery(this).parent().append(input);
    }
    else {
        var input = jQuery(this).parent().find('input[name="otherdiet[]"]');

        if (input.length > 0)
            input.remove();
    }
});

现在，如果你有多个这些下拉列表，你想要为每个下拉列表做一些不同的事情，你可以在select元素中添加一个类，id或任何其他类型的可区分属性。然后在jQuery代码中，检查该可区分属性并执行适当的操作。

使用JavaScript隐藏/显示动态生成的输入框

1 个答案: