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>
Approach: Select the option from select which needs to remove. Use JQuery remove() method to remove the option from the HTML document.
The option to be removed is selected by getting the select box. The value to be removed is specified on the value selector (value='optionValue') on the select box. The remove() method is then used to remove this selected option. The find() method can be used to find the option in the value with the value selector.
Explanation: If we want to remove all items from dropdown except the first item then we can use $('#ddlItems option:not(:first)'). remove(); Here we have excluded first item from being deleted. If we want to remove all items from dropdown except the last item then we can use $('#ddlItems option:not(:last)').
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/
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With