Reputation: 495
i had the following question.
i want to update my subcategory select list when the user select a specific leadcategory and show in other select list the subcategories.
The problem is that i can't figure out when i'm selecting a another leadcategory my previous subcategory has to remove and fill with the new data depending wich leadcategory i selected.
For now i've the following code.
The data i parse is a json encode who looks like:
Website.Config = {"categorieen":{"1":{"1":"Navullingen ","2":"Potloden"},"2":{"3":"Navullingen","6":"potloden","7":"testSubcategorie"}}}
function onChangeSubcategorie(){
categorieen = Website.Config.categorieen;
$("form#overviewFilter select#cat").change(function() {
var hoofdCategorie = $(this).val();
var subcategorieen = categorieen[hoofdCategorie];
for(var c in subcategorieen ) {
var tekst = subcategorieen[c];
if(hoofdCategorie == 1) {
$('form#overviewFilter select#scat').append("<option value="+tekst+">"+tekst+"</option>");
}else if(hoofdCategorie == 2) {
$('form#overviewFilter select#scat').append("<option value="+tekst+">"+tekst+"</option>");
}
}
});
}
thank you for helping.
Upvotes: 1
Views: 4517
Reputation: 1121
You need to clear #scat list first and then populate it with new data.
You can do this using next statements:
$('form#overviewFilter select#scat').empty();
or
$('form#overviewFilter select#scat').find('option').remove();
More information: jQuery remove
Upvotes: 3
Reputation: 888007
You can clear an element's contents by calling the empty()
method, like this:
$('#scat').empty();
By the way, when you select an element by ID, you don't need anything but the ID selector (eg, #scat
).
Since IDs are (or are supposed to be) unique, you don't need anything else.
jQuery optimizes for "pure" ID selectors, so #scat
will be faster than any other selector.
Upvotes: 1