Question

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

这是我的代码：

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。

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

1 个答案: