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

Question

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

这是我的代码:

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>

Javascript:

    $(document).ready(function(){
                $("#id_xyz").change(function(){
                var v = $(this).val();
                var y = $("#"+v);
                if (v != ''){
                $('.sub_content').hide();
                 y.show();
                 }

                });
            }); 

        $(document).ready(function(){
                var counter =2;
                $("#add").click(function(e){
                e.preventDefault();
                var $newdiv = $('#dropdown').clone();
                var newvert =        $(document.createElement('div')).after("id", 'dropdown' + counter);
                $('div.mydropdown').append($newdiv);
                $("#remove").show();
                });
            }); 

这是 jsfiddle 的链接:http://jsfiddle.net/deerups/HQUMF/

Answer 1

克隆值时，使用 true 参数克隆它:

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

传递 true 表示“克隆事件”:http://api.jquery.com/clone/ ;

然后为此更改您的 .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。