javascript - jquery clone drop down list - Stack Overflow

admin管理员组

文章数量:1384770

Hi i have following scenario of drop down list

Whenever i select cat1 options, sub cat 1 options will be populated. But if i add another category it should only add cat1 options not along with sub cat options.But in my case both of cat 1 and sub cat options are loaded. Following are my code to clone drop down list.

        <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());

});

This is how i actually supposed to look like

Thanks.

update: populate ajax result

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

Once new cat list has been added and an option is selected, the first sub cat are changing according to new list. How to prevent this?

Hi i have following scenario of drop down list

Whenever i select cat1 options, sub cat 1 options will be populated. But if i add another category it should only add cat1 options not along with sub cat options.But in my case both of cat 1 and sub cat options are loaded. Following are my code to clone drop down list.

        <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());

});

This is how i actually supposed to look like

Thanks.

update: populate ajax result

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

Once new cat list has been added and an option is selected, the first sub cat are changing according to new list. How to prevent this?

• javascript
• jquery
• html
• ajax

Share Improve this question Follow edited Jan 25, 2013 at 4:26 Saraswathi Apavoo asked Jan 25, 2013 at 3:22 Saraswathi ApavooSaraswathi Apavoo 37122 gold badges44 silver badges1818 bronze badges 4

• You should retain a clean state new-category and clone it automatically when the page is loaded. Then clone it again when the add-another-cat is pressed. This way you won't clone a modified new-category. – Antony Commented Jan 25, 2013 at 3:25
• Why not empty the category-select-sub after the clone? – guy mograbi Commented Jan 25, 2013 at 4:14
• Your second question is very easy, you use $(".category-select-sub") instead of keeping a reference to the select-sub you create and refer to it. writing $(".category-select-sub") affects all .category-select-sub. you should simply write $newselect.show().html(subhtml); – guy mograbi Commented Jan 25, 2013 at 4:33
• edited my answer to include solution for the category-select-sub issue. – guy mograbi Commented Jan 25, 2013 at 4:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Your code doesn't make sense to me, but this is what I think you are trying to do. Correct me if I am wrong.

"I would like to clone the div new-category and append it to the div new-categories. I only want the first select list cloned, not anything else.

http://jsfiddle/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);
});

http://jsfiddle/SCArr

<script src="//code.jquery./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>

I would like to see how you have the second sub select menu as it might affect the solution.

Solution 1 - better creation with an empty state

the problem is in your HTML structure

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

When you clone .new-categories you clone both select elements. You need to reconstruct your HTML so you will clone only what you want. There will be something you will need to create by yourself without a clone. For example, something like this:

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

Solution 2 - empty the sub select after clone

a jsfiddle that shows how to empty a select

What to do about auto-populating the sub select affecting all?

This is easy, your code explicitly refer to all sub selects. see the you code saying

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

This code means - set this HTML to all ".category-select-sub" elements. But you want only a specific element with this class - not all..

You should only refer to the sub select you created - which is easy as you already have a reference to it - so the success function should have something like this :

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

本文标签： javascriptjquery clone drop down listStack Overflow