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

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

我的问题是有一个按钮，它克隆了这段代码，并创建了额外的副本

我不知道如何在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>

---

通过将onChange事件处理程序绑定到select字段开始。然后检查是否选择了“其他”选项或其他选项。如果选择了“其他”选项，请将输入添加到父元素。如果选择了其他选项，则查看输入是否存在，如果存在，则将其删除

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代码中，检查该可区分属性并执行适当的操作。

好吧，首先，对于1个下拉列表，而不是动态创建的下拉列表，您将如何执行该操作？你可以从这里开始，告诉我们你有什么，这样我们就可以帮助你完成它。我会在输入上做一个style=display:block，然后在select上单击调用js，在js中，将display设置为block by elementidies，这就是问题所在。新创建的注释。@blex oops忘记了这一点，很好-删除了令人不快的注释这是创建新注释的JS:function addGuest{var id=makeid var fieldset=$'。guest fieldset:first'。clone.appendTo'guest-fieldset-container'；fieldset.attr'id'，id；var guest=fieldset.find'input.guest name'；guest.val；var atticing=fieldset.find'select.atticing'；atticing.after；}谢谢，我已经将代码粘贴到我的js文件中，但是当我选择“其他”选项时，什么也没有发生。它应该会显示出来，不是吗？这是一个实时站点：将form control select更改为。form control select，尝试一下。Als注意，您可以使用console.log调试代码，查看哪些有效，哪些无效。按F12打开控制台，然后查看您记录的消息和运行代码时出现的任何错误。@ThijsRiezebeek仍然为空。单击“否”时控制台也为空errors@blex我删除了，因为js应该创建它，不是吗？现在我把它放回去了，但看不到点。你可以在这行之前添加console.logthis.value；如果this.value='other'{查看是否正确拾取了该值。