2

嗨，我有以下下拉列表场景

在此处输入图像描述

每当我选择 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);
                }
            });
        });

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

4

3 回答 3

2

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

“我想克隆 divnew-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);
});
于 2013-01-25T03:51:21.243 回答
1

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>
于 2013-01-25T03:30:29.263 回答
0

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

解决方案 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 - 克隆后清空子选择

一个显示如何清空选择的 jsfiddle

如何自动填充影响所有人的子选择？

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

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

此代码意味着 - 将此 HTML 设置为所有“.category-select-sub”元素。但是您只需要此类的特定元素-不是全部..

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

$newselect.show().html(subhtml);
于 2013-01-25T03:47:48.670 回答