jquery clone下拉列表

时间:2013-01-25 03:22:42

标签: javascript jquery html ajax

您好我有以下下拉列表的方案

enter image description here

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

});

这就是我实际上应该看起来像

的样子

enter image description here

感谢。

更新:填充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);
                }
            });
        });

添加新猫列表并选择一个选项后,第一个子猫将根据新列表进行更改。如何防止这种情况?

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分: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);
});

答案 2 :(得分: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 - 在克隆

后清空子选择

a jsfiddle that shows how to empty a select

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

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

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

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

你应该只参考你创建的子选择 - 这很容易,因为你已经有了它的参考 - 所以成功函数应该是这样的:

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