abhängiges Dropdown mit jquery CODEIGNITER vorherige Auswahl geht nicht weg

Question

Ich habe diese abhängige Dropdown-Funktion zunächst, aber nach der zweiten Auswahl die Werte der ersten Auswahl nicht weggehen. Stattdessen werden die neuen Werte nur mit den vorherigen Werten gemischt. Ich bin nicht vertraut mit jQuery, aber ich muss dieses so schnell wie möglich beenden.

erste Dropdown

  <select class="form-control" name = "PROV_ID" id = "PROV_ID"> 
       <option></option> 
       <?php foreach ($content as $cs) {?> 
        <option value="<?php echo $cs->PROV_ID; ?>"><?php echo $cs->PROVINCE; ?></option> 
       <?php } ?> 
      </select> 

zweites Dropdown

  <select name = 'CT_ID' id = 'CT_ID'> 
       <option value="">-- Select Type --</option> 
      </select> 

jquery

<script> 
    jQuery(document).ready(function(){ 
     $("#PROV_ID").change(function() { 
     var PROVID = {"PROVID" : $('#PROV_ID').val()}; 
     console.log(PROVID); 

     $.ajax({ 
      type: "POST", 
      data: PROVID, 
      url: "<?php base_url(); ?>Employees/dependent_dropdown", 

      success: function(data){ 
      $.each(data, function(i, data){ 
      $('#CT_ID').append("<option value='"+data.CT_ID+"'>"+data.CITY+"</option>"); 
      }); 
      } 
     }); 
     }); 
    }); 
</script> 

Ich mag den Wert des zweiten Drop-Down aktualisieren, wenn ich eine neue Option auf der ersten Dropdown auswählen .

Answer 1

Löschen Sie die vorhandenen Optionen vor dem Anfügen:

success: function(data){ 
    var select = $('#CT_ID'); 
    select.empty(); 
    $.each(data, function(i, option){ 
     select.append("<option value='"+option.CT_ID+"'>"+option.CITY+"</option>"); 
    }); 
} 

Answer 2

Dies liegt daran, Sie append verwenden HTML an das Auswahlelement hinzuzufügen. Ich würde vorschlagen, jQuery's html zu verwenden, um das HTML der Auswahl einzustellen (die alle vorhandenen Optionselemente löscht). Der zusätzliche Vorteil besteht darin, dass Sie nur eine DOM-Manipulation durchführen, im Gegensatz zu einer pro Option.

success: function(data){ 
    var $select = $('#CT_ID'), 
     html = ''; 
    $.each(data, function(i, option) { 
     html += "<option value='"+option.CT_ID+"'>"+option.CITY+"</option>"; 
    }); 
    $select.html(html); 
}