jquery克隆下拉列表

Question

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

每当我选择 cat1 选项时，都会填充子 cat 1 选项。但是如果我添加另一个类别 它应该只添加 cat1 选项而不是子 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);
});

Answer 2

http://jsfiddle.net/SCArr

<script src="//code.jquery.com/jquery-latest.js"></script>
<div id="clone" class="new-category" style="display:none;">
    <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 class="new-categories">
</div>
<a href="#" class="add-another-cat smallest" style="">Add another category</a>

<script>
$('.add-another-cat').click(function(event){
    event.preventDefault();
    var $orDiv = $('.new-category:last').after($('#clone').clone().removeAttr('id').show());
});
$('.new-categories').html($('#clone').clone().removeAttr('id').show());
</script>

Answer 3

我想看看您如何拥有第二个子选择菜单，因为它可能会影响解决方案。

解决方案 1 - 使用空状态更好地创建

问题出在你的 HTML 结构中

<div class="new-category">
      <select class="category-select"> ... </select> 
      <select> ... </select> 
</div>

当您克隆 .new-categories 时，您会克隆两个选择元素。 您需要重建您的 HTML，以便只克隆您想要的内容。 您将需要自己创建一些没有克隆的东西。 例如，像这样：

$('.new-category:last').after( $("<div/>")
         .addClass("new-category").append($('.category-select:last').clone()).append($("<select/>").addClass(".category-select-sub").hide());

解决方案 2 - 克隆后清空子选择

a jsfiddle that shows how to empty a select

自动填充影响所有的子选择怎么办？

这很简单，您的代码明确引用所有子选择。看到你的代码说

$('.category-select-sub').show().html(subhtml);

此代码的意思是 - 将此 HTML 设置为所有“.category-select-sub”元素。但是你只想要这个类的特定元素 - 不是全部..

您应该只引用您创建的子选择 - 这很容易，因为您已经引用了它 - 所以成功函数应该是这样的：

$newselect.show().html(subhtml);