Jak usunąć i zastąpić wybrane opcje za pomocą jquery?

Potrzebujesz pomocy tutaj. Mam formularz dynamiczny, który umożliwia użytkownikowi wybranie jego poprawnych adresów. To, co zrobiłem, to 2 pola wyboru. Jeden to Stany, a drugi to miasto. Gdy użytkownik wybierze swoje stany, opcje rozwijanego miasta zostaną zmienione dynamicznie zgodnie z wybranymi stanami. Mój problem polega na tym, że go dołączam. Dlatego mam problem ze zmianą właściwego miasta. Ponieważ wyświetli poprzednią wybraną wartość opcji. Zachowuje dołączanie i dołączanie. Jakiś pomysł, jak mogę nad tym pracować? Oto mój kod.

$('#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>");    
            }    
        }    
    });    
});

Oto wybór dla miasta:

<select id="city" name="city">
    <option value="">---Select City---</option>
</select>

questionAnswers(6)

yourAnswerToTheQuestion