Jquery: Remove previous data in a select list

Question

Hi all,

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.

Answer 1

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.

Answer 2

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