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?