Jerielle Jerielle - 3 months ago 32
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.

var state_code = $('#state').val();
var city_url = '<?php echo site_url("locations/displayCity/' + state_code + '"); ?>';
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>


Removes all options and appends your default one again:

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