如何停止显示从属下拉列表的早期选项？

Question

我使用ajax调用填充两个依赖下拉列表。问题是，如果我多次更改我的选择（主下拉列表），所有依赖选项（较早的值）显示在从属下拉列表中。这里是我的Ajax调用

$.ajax({ 
      type: "GET", 
      url: "index.php?r=orders/on-select", 
      data: {myVar: myVar}, 
      success: function (data) { 
       var jdata = JSON.parse(data); 
       var cluster = jdata.Clusters; 
       var sites = jdata.Sites; 

       $.each(cluster, function (optionValue, optionLabel) { 
        var option = $('<option value="' + optionLabel + '">' + optionLabel + '</option>'); 
        $('[ref="region"]').find('[name="list box element"]').append(option); 

        var opnGrpval = $('<li value="' + optionValue + '">' + optionLabel + '</li>'); 
        $('[ref="region"]').find('.selectBoxInput').find('.dropDownBox').append(opnGrpval); 
       }); 
       $.each(sites, function (optionValue, optionLabel) { 
        var option = $('<option value="' + optionLabel + '">' + optionLabel + '</option>'); 
        $('[ref="sites"]').find('[name="list box element"]').append(option); 

        var opnGrpval = $('<li value="' + optionValue + '">' + optionLabel + '</li>'); 
        $('[ref="sites"]').find('.selectBoxInput').find('.dropDownBox').append(opnGrpval); 
       }); 
      } 
     }); 

Answer 1

变化append到html即可。

$.ajax({ 
 
      type: "GET", 
 
      url: "index.php?r=orders/on-select", 
 
      data: {myVar: myVar}, 
 
      success: function (data) { 
 
       var jdata = JSON.parse(data); 
 
       var cluster = jdata.Clusters; 
 
       var sites = jdata.Sites; 
 

 
       var regionOptions = ''; 
 
       var dropdownOptions = '' 
 
       $.each(cluster, function (optionValue, optionLabel) { 
 
        var option = $('<option value="' + optionLabel + '">' + optionLabel + '</option>'); 
 
        regionOptions += option; 
 

 
        var opnGrpval = $('<li value="' + optionValue + '">' + optionLabel + '</li>'); 
 
        dropdownOptions += opnGrpval; 
 
       }); 
 
        $('[ref="region"]').find('[name="list box element"]').html(listoptions); $('[ref="region"]').find('.selectBoxInput').find('.dropDownBox').html(dropdownOptions); 
 
        
 
        var sitesOptions = ''; 
 
        var sitesDropdownOptions = ''; 
 
       $.each(sites, function (optionValue, optionLabel) { 
 
        var option = $('<option value="' + optionLabel + '">' + optionLabel + '</option>'); 
 
        sitesOptions += option; 
 

 
        var opnGrpval = $('<li value="' + optionValue + '">' + optionLabel + '</li>'); 
 
        sitesDropdownOptions += opnGrpval; 
 
        
 
       }); 
 
        $('[ref="sites"]').find('[name="list box element"]').html(sitesOptions); $('[ref="sites"]').find('.selectBoxInput').find('.dropDownBox').html(sitesDropdownOptions); 
 
      } 
 
     });