javascript - jquery 克隆下拉列表

Question

您好，我有以下下拉列表场景

每当我选择 cat1 选项时，子 cat 1 选项将被填充。但是如果我添加另一个类别它应该只添加 cat1 选项而不是 sub cat 选项。但在我的情况下，cat 1 和 sub cat 选项都被加载了。以下是我克隆下拉列表的代码。

        <div class="new-categories">
                    <div class="new-category">
                        <select class="category-select" name="categories">
                        <option></option>
                        <option value="1">cat 1</option>

                    </select>
                    <select class='category-select-sub' style="display:none">
                        <!-- loaded from ajax -->
                    </select>
        </div></div>
    <a href="#" class="add-another-cat smallest" style="">Add another category</a>


$('.add-another-cat').click(function(event){
             event.preventDefault();
             var $orDiv = $('.new-category:last').after($('.new-category:first').clone());

});

这才是我应该的样子

谢谢。

更新:填充ajax结果

 $('div.new-categories').on('change', 'select.category-select', function () { 
             var $newselect = $('<select />').addClass('category-select-sub');
    $(this).parent().append($newselect);
            var cat_id = $(this).val();
            $.ajax({
                url:baseUrl+'categories/getsubcat',
                data:{'id':cat_id},
                dataType:'json',
                async:false,
                type:'POST',
                success:function(data){
                    var subhtml = data;
                    $('.category-select-sub').show();
                    $('.category-select-sub').html(subhtml);
                }
            });
        });

一旦添加了新的猫列表并选择了一个选项，第一个子猫就会根据新列表进行更改。如何预防？

Answer 1

你的代码对我来说没有意义，但这就是我认为你正在尝试做的。如果我错了，请纠正我。

“我想克隆 div new-category 并将其附加到 div new-categories。我只想克隆第一个选择列表，而不是其他任何内容.

http://jsfiddle.net/HZp5M/

$('a.add-another-cat').click(function(e) {
    e.preventDefault();
    //clone the first div
    var $newdiv = $('div.new-category:first').clone();
    //remove the second select (if there is one)
    $newdiv.children('select.category-select-sub').remove();
    //append new div
    $('div.new-categories').append($newdiv);
});