1

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

这是我的代码：

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/

4

1 回答 1

2

克隆值时，请使用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。

于 2013-06-21T21:08:29.940 回答