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

Question

這里需要一點幫助。 我有一個動態表單，使用戶可以選擇他/她的正確地址。 我所做的是我有 2 個選擇框。 一是州，二是城市。 用戶選擇他/她的州后，下拉城市選項將根據所選州動態更改。 我的問題是，我正在附加它。 這就是為什么我在更改正確的城市時遇到問題。 因為它會顯示之前選擇的選項值。 它一直在追加和追加。 知道我該如何解決這個問題嗎？ 這是我的代碼。

$('#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>

Answer 1

刪除所有選項並再次附加您的默認選項：

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

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

Answer 2

您可以執行以下操作：

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 方法並緩存選擇器。

Answer 3

這是本機 java 腳本正確的工作形式：

// get the select html element by id
var selectElement = document.getElementById('city');

// remove all options from select
selectElement.options.length = 0;

// create new option element
var newOptionElement = document.createElement('option');
newOptionElement.value = "optionValue";
newOptionElement.innerHTML = "option display text";

// add the new option into the select
selectElement.appendChild(newOptionElement);

工作小提琴示例

Answer 4

在像這樣附加到它之前，您應該清除城市 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>");
    }

}

Answer 5

在 for 循環之前，添加此代碼。

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

工作小提琴

Answer 6

試試看，

 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>");
    }
}

Answer 7

僅僅因為我遇到了這種情況——我想我會提到，如果你使用 bootstrap-select 來美化你的選擇框（或者甚至是另一個類似的 javascript 視覺替代傳統的 html 選擇），你可能需要在你一次刷新它我重新填充了選項。 在 select-bootstrap 的情況下，它是$(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');
}