如何刪除和替換使用jQuery的選擇選項？

這裏需要一點幫助。我有一個動態的表單，使用戶能夠選擇他/她的正確地址。我所做的是我有2個選擇框。一個是國家，第二個是城市。在用戶選擇他/她的狀態後，下拉城市選項將根據所選狀態動態變化。我的問題是，我正在追加它。這就是爲什麼我有一個問題，改變正確的城市。因爲它會顯示上一個選定的選項值。它不斷追加和追加。任何想法我該如何解決這個問題？這是我的代碼。如何刪除和替換使用jQuery的選擇選項？

$('#state').on('change',function(){  
    var state_code = $('#state').val();  
    var city_url = '<?php echo site_url("locations/displayCity/' + state_code + '"); ?>';  
    $.ajax({  
     type: 'POST', 
     url: city_url, 
     data: '', 
     dataType: 'json', 
     async: false, 
     success: function(i){  
      var select = $('#city');  
      for (var j = 0; j < i.length; j++){     
       console.log(i[j].name + "--" + i[j].id); 
       $("#city").append("<option value='" +i[j].name+ "'>" +i[j].name+ "</option>");  
      }  
     }  
    });  
});

下面是選擇城市：

<select id="city" name="city"> 
    <option value="">---Select City---</option> 
</select>

來源

2013-11-27 Jerielle

這裏更多http://stackoverflow.com/questions/1801499/how-to-change-options-of-select-with答案-jquery –

刪除所有選項，然後再附加您的默認之一：

var select = $('#city'); 
select.empty().append('<option value="">---Select City---</option>');

http://api.jquery.com/empty/

來源

2013-11-27 07:50:18 Enam

好的謝謝。它現在正在工作，但我怎麼能跳過第一個選項中的刪除？所以每個城市的第一個選項總是空的？ – Jerielle

@Jerielle更新。 – Enam

確定它正在工作。我會接受的。再次感謝:) – Jerielle

for循環之前，添加以下代碼。

$("#city option").each(function() { 
$(this).remove(); 
});

Working Fiddle

來源

2013-11-27 07:48:52

好吧，我會嘗試。希望它的工作。 :) – Jerielle

你應該清除城市DIV追加到它像在此之前：

success: function(i){ 

    var select = $('#city'); 

    select.empty(); 

    select.append("<option value=''>---Select City---</option>"); 

    for (var j = 0; j < i.length; j++){ 
      console.log(i[j].name + "--" + i[j].id); 
      $("#city").append("<option value='" +i[j].name+ "'>" +i[j].name+ "  </option>"); 
    } 

}

來源

2013-11-27 07:49:32

好吧，但是如果我不想刪除我的第一個選項中的空值？ – Jerielle

您也可以在空值服務器端，或者在for循環之前添加一個空選項。 –

嘗試像，

success: function(i){ 
    var select = $('#city'); 
    // remove previous data and add default option 
    select.html('<option value="">---Select City---</option>'); 
    for (var j = 0; j < i.length; j++){ 
     console.log(i[j].name + "--" + i[j].id); 
     select.append("<option value='" +i[j].name+ "'>" +i[j].name+ "</option>"); 
    } 
}

來源

2013-11-27 07:51:55

你可以做到以下幾點：

var selectbox = $('#city'); 
selectbox.empty(); 
var list = ''; 
for (var j = 0; j < i.length; j++){ 
     list += "<option value='" +i[j].name+ "'>" +i[j].name+ "</option>"; 
} 
selectbox.html(list);

注意：不要調用循環中的append方法，並且還緩存選擇。

來源

2013-11-27 07:53:22 Ramesh

只是因爲我遇到了這種情況 - 我想我會提到，如果您使用bootstrap-選擇來美化您的選擇框（或者甚至爲您的傳統html選擇甚至另一個類似的javascript可視替換），您可能需要刷新它一旦你重新填充選項。在選擇-引導的情況下，它的$(element).selectpicker('refresh')的問題 - 例如：

function changeSelectOptions(id, max) { 
    var selectbox = $(id); 
    selectbox.empty(); 
    var list = ''; 
    for (var j = 1; j < max; j++){ 
     list += "<option value='" +j+ "'>" +j+ "</option>"; 
    } 
    selectbox.html(list); 
    $(id).selectpicker('refresh'); 
}

來源

2017-03-30 22:59:19 Grant

如何刪除和替換使用jQuery的選擇選項？

回答

相關問題