Как удалить и заменить опции выбора с помощью jquery?

Вам нужна небольшая помощь. У меня есть динамическая форма, которая позволяет пользователю выбирать его/ее правильные адреса. Я сделал, что у меня есть 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>

Ответы

Ответ 1

Удаляет все параметры и снова добавляет ваш по умолчанию:

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

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

Ответ 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);

Примечание. Не вызывайте метод добавления в цикле, а также кешируйте селектора.

Ответ 3

Вы должны очистить город 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>");
    }

}

Ответ 4

Перед циклом, добавьте этот код.

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

Рабочая скрипта

Ответ 5

Попробуйте,

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

Ответ 6

Просто потому, что я столкнулся с этой ситуацией - я думал, что я бы сказал, что если вы используете 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');
}