Jerielle Jerielle - 18 days ago 6
Javascript Question

How to remove and replace select options using jquery?

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

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/

Comments