Javascript jquery克隆下拉列表

嗨，我有下面的下拉列表场景

每当我选择cat1选项时，将填充子cat1选项。但如果我添加另一个类别 它应该只添加cat1选项，而不是子cat选项。但在我的情况下，cat 1和子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());

});

第一类
$（'.添加另一个类别'）。单击（函数（事件）{
event.preventDefault（）；
变量$orDiv=$（'.new category:last'）。在（$（'.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);
                }
            });
        });

$（'div.new-categories'）。在（'change'，'select.category select'，函数（）{
var$newselect=$（''）.addClass（'category-select-sub'）；
$（this.parent（）.append（$newselect）；
var cat_id=$（this.val（）；
$.ajax({
url:baseUrl+'categories/getsubcat'，
数据：{'id'：cat_id}，
数据类型：'json'，
async:false，
类型：'POST'，
成功：功能（数据）{
var subhtml=数据；
$（'.category select sub'）.show（）；
$（'.category select sub'）.html（subhtml）；
}
});
});

添加新的cat列表并选择一个选项后，第一个子cat将根据新列表进行更改。如何预防这种情况？

第一类
$（'.添加另一个类别'）。单击（函数（事件）{
event.preventDefault（）；
var$orDiv=$（'.new category:last'）。在（$（'#clone'）.clone（）之后。removeAttr（'id'）.show（））；
});
$（'.new categories'）.html（$（'#clone'）.clone（）.removeAttr（'id'）.show（））；

我想看看第二个子选择菜单是如何产生的，因为它可能会影响解决方案

解决方案1-更好地创建空状态 问题在于你的HTML结构

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

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

如何自动填充影响所有的子选择？ 这很简单，您的代码显式引用所有子选择。看到你的代码了吗

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

此代码表示-将此HTML设置为所有“.category select sub”元素。但是您只需要该类的一个特定元素，而不是全部

您应该只引用您创建的子选择-这很容易，因为您已经有了对它的引用-因此success函数应该有如下内容：

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

---

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

“我想克隆div

new categories

并将其附加到div

new categories

中。我只想克隆第一个选择列表，不想克隆其他任何内容

---

您应该保留一个干净的状态

新类别

，并在加载页面时自动克隆。然后在按下

添加另一个类别

时再次克隆。这样您就不会克隆修改后的

新类别

。为什么不在克隆后清空类别选择子项？第二个问题很简单，您可以使用

$（“.category-select-sub“

而不是保留对您创建并引用的select-sub的引用。写入

$（“.category-select-sub”）

会影响所有.category-select-sub。您只需编写

$newselect.show（）.html（subhtml）

编辑了我的答案，以包含类别选择子问题的解决方案。通过创建新元素，您将删除自动填充子菜单的事件处理程序。您将需要重新添加事件。通过利用

克隆

可以避免该步骤。我没有看到任何关于自动填充子菜单的事件处理程序的信息.但是-你应该看一下“开”或“直播”“若要解决此问题，因为您需要事件处理程序来处理尚不存在的元素。请添加有关自动填充子菜单要求的详细信息，以便我也能够为其提供代码段。这实际上不是我的问题。我只是在评论你的解决方案。他说，第二个子菜单是通过ajax填充的，这意味着初始选择项上必须有一个事件。ok-live仍然会解决这个问题。但也许更好的解决方案是在这种情况下清空第二个选项..好的。但如何防止当我在第一个类别选择一个选项时，它应该填充第一个子类别列表上的列表，而不是其他子类别列表上的列表？@SaraswathiApavoo-这确实是一个不同的问题。我不知道你是如何填写第二个选择列表的。如果你需要帮助，你应该问一个新的SO问题。你的东西很好用，现在一旦我添加了新的cat并为它选择了选项，第一个子cat也会根据新cat列表的结果而改变。如果它克隆了一个事件处理程序，你需要从新克隆的元素中解除绑定：

$（yourNewElement）。解除绑定（'change'）（或使用的任何事件）。此外，您的jsfiddle.net/HZp5M/1也不能正常工作。请注意，它不止一次地追加..好的。但是如何防止当我在第一个类别选择一个选项时，它应该填充第一个子类别列表中的列表，而不是其他列表中的列表。您需要在
上使用
id
，而不是只使用
类。假设选择了
，则填充了
。
$('.category-select-sub').show().html(subhtml);

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

$('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);
});