javascript - jquery CODEIGNITER 的依赖下拉列表以前的选择不会消失

Question

我最初有这个依赖的下拉菜单，但在第二次选择之后，第一个选择的值不会消失。相反，新值只是与以前的值混合。我不熟悉 jQuery，但我需要尽快完成这个。

第一个下拉列表

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

第二个下拉列表

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

每当我在第一个下拉列表中选择新选项时，我想刷新第二个下拉列表的值。

Answer 1

在附加之前清除现有选项:

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