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