Javascript 只有顶部的下拉列表才能正确填充。也需要与其他下拉列表相同的功能

我的目标是在点击按钮时添加下拉列表。第一个下拉列表允许我选择一个子下拉列表。它工作正常。但当我添加另一个下拉列表时，它失败了。添加按钮添加另一个下拉菜单，其功能与第一个下拉菜单完全相同

这是我的密码：

HTML

<div class="mydropdown">
    <div id="dropdown"
        <label for="xyz" >xyz</label>
            <select id="id_xyz" name="xyz_id">
                            <option>--Select -</option>
                              <option value="v1">op1</option>
                                <option value="v2">op2</option>
                        </select>

                    <select id="v1" name="t1" style="display:none" class="sub_content"> 
                        <option>-Sub1-</option>
                         <option>option2</option>
                         <option>option3</option>
                         <option>option4</option>
                    </select>
                    <select id="v2" name="t2" style="display:none" class="sub_content"> 
                        <option>-Sub2-</option>
                        <option>option1</option>
                         <option>option2</option>
                         <option>option3</option>
                         <option>option4</option>
                    </select>

                        <button class="add_button" id="add">Add </button>
                        <button class="add_button" id="remove" style="display:none;">remove </button>

    </div>
    </div>

---

以下是指向JSFIDLE的链接：

克隆值时，请使用

true

参数进行克隆：

var $newdiv = $('#dropdown').clone(true);

传递

true

表示“克隆事件”：

然后更改

.change（）

函数：

$(document).ready(function(){
    $("#id_xyz").change(function(){
        var v = $(this).find(':selected').val();
        if (v){
            var y = $(this).closest('#dropdown').find("#"+v);
            y.siblings('.sub_content').addBack().hide();
            y.show();
        }else{
            $(this).closest('#dropdown').find('.sub_content').hide()
        }
    });
});

这将允许您更改更改下拉列表旁边的下拉列表，而不是第一个下拉列表

---

旁注，永远不要复制id。

为什么2文档准备就绪？您正在克隆自己，似乎只需要将新的单击处理程序绑定到新克隆的添加/删除按钮。如果您不知道自己在说什么，请不要写随机答案。。这很容易引发一场讨论。你的活动代表团不起作用，因为每个克隆元素的

id

都会更改……在他的情况下，他从不更改id。但是，是的，如果他更改id，那就不起作用了。哎呀，我误读了他的代码。有一部分看起来像是他在改变克隆元素的id（他应该这么做），但这不是他真正在做的事情，这不是很有帮助。我喜欢更改添加的每个下拉类的名称。这将有助于跟踪下拉式节目主持人。@Acer_Racer，我对你的问题有点困惑，改变了我的答案，也许这是个好问题？

$(document).ready(function(){
    $("#id_xyz").change(function(){
        var v = $(this).find(':selected').val();
        if (v){
            var y = $(this).closest('#dropdown').find("#"+v);
            y.siblings('.sub_content').addBack().hide();
            y.show();
        }else{
            $(this).closest('#dropdown').find('.sub_content').hide()
        }
    });
});