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> 
