How to remove and replace select options using jquery?

Question

Need a little help here. I have a dynamic form that enables user to select his/her correct addresses. What I did is I have 2 select boxes. One is States and second is city. After the user choose his/her states the dropdown city options will be change dynamically according to the selected states. My problem is, I am appending it. That's why I have a problem changing the correct city. Because it will display the previous selected option value. It keeps on appending and appending. Any idea how can I work on this? Here's my 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>");    
            }    
        }    
    });    
});

Here's the select for city:

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

Answer 1

Removes all options and appends your default one again:

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

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

Answer 2

You can do the following:

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

Note: Don't call the append method in the loop and also cache the selectors.

Answer 3

this is the native java-script correct working form:

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

Answer 4

You should clear the cities div before appending to it like this:

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

}

Answer 5

Before for loop,add this code.

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

Working Fiddle

Answer 6

Try it like,

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

Answer 7

Simply because I ran into this situation - I thought I'd mention that if you are using bootstrap-select to prettify your select boxes (or even another similar javascript visual substitution for your conventional html select) you may need to refresh it once you've repopulated the options. In the case of select-bootstrap it's a matter of $(element).selectpicker('refresh') - in example:

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