如何使用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);

工作小提琴示例