jquery clone drop down list

Question

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?

Answer 1

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.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

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