Wie entferne und ersetze ich ausgewählte Optionen mit jquery?

Brauche hier ein wenig Hilfe. Ich habe ein dynamisches Formular, das es dem Benutzer ermöglicht, seine/ihre richtigen Adressen auszuwählen. Was ich getan habe, ist, dass ich 2 Auswahlfelder habe. Einer ist Staaten und der zweite ist Stadt. Nachdem der Benutzer seine Bundesstaaten ausgewählt hat, ändern sich die Dropdown-Stadtoptionen dynamisch entsprechend den ausgewählten Bundesstaaten. Mein Problem ist, ich hänge es an. Deshalb habe ich ein Problem, die richtige Stadt zu ändern. Weil es den zuvor ausgewählten Optionswert anzeigt. Es wird immer weiter angehängt und angehängt. Irgendeine Idee, wie ich daran arbeiten kann? Hier ist mein Code.

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

Hier ist die Auswahl für die Stadt:

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

Entfernt alle Optionen und fügt wieder Ihre Standardoption hinzu:

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

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

Sie können Folgendes tun:

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

Hinweis: Rufen Sie die Append-Methode nicht in der Schleife auf und cachen Sie auch die Selektoren.

Dies ist die korrekte Arbeitsform des nativen Java-Skripts:

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

Beispiel für eine funktionierende Geige

Sie sollten das Städte-Div löschen, bevor Sie es wie folgt anhängen:

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

}

Fügen Sie vor der for-Schleife diesen Code hinzu.

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

Arbeitsgeige

Probieren Sie es aus,

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

Einfach, weil ich auf diese Situation gestoßen bin – ich dachte, ich würde erwähnen, dass Sie, wenn Sie Bootstrap-Select verwenden, um Ihre Auswahlfelder zu verschönern (oder sogar eine andere ähnliche visuelle JavaScript-Ersetzung für Ihre herkömmliche HTML-Auswahl), diese möglicherweise aktualisieren müssen, sobald Sie ‘ Habe die Optionen neu aufgefüllt. Bei select-bootstrap geht es um $(element).selectpicker('refresh') – zum Beispiel:

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