如何使用jquery删除和替换select选项?

k3fezbri  于 2023-03-29  发布在  jQuery
关注(0)|答案(7)|浏览(197)

这里需要一点帮助。我有一个动态的形式,使用户能够选择他/她的正确地址。我所做的是我有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>
pgpifvop

pgpifvop1#

删除所有选项并再次附加默认选项:

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

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

cfh9epnr

cfh9epnr2#

您可以执行以下操作:

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方法,也不要缓存选择器。

ercv8c1e

ercv8c1e3#

这是原生JavaScript正确的工作形式:

// 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);

Working Fiddle example

5m1hhzi4

5m1hhzi44#

你应该在像这样附加到它之前清除cities 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>");
    }

}
flvtvl50

flvtvl505#

在for循环之前,添加以下代码。

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

**一个

jchrr9hc

jchrr9hc6#

试试看

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

voj3qocg7#

只是因为我遇到了这种情况-我想我应该提到,如果你使用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');
}

相关问题