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>

More answers here stackoverflow.com/questions/1801499/…

Dilip Rajkumar
– Dilip Rajkumar

2015-04-08 09:40:32 +00:00
Commented Apr 8, 2015 at 9:40 — Dilip Rajkumar
– Dilip Rajkumar, Commented Apr 8, 2015 at 9:40

Enam · Accepted Answer · 2013-11-27 07:50:18Z

62

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/

answered Nov 27, 2013 at 7:50

Enam

1,2581 gold badge9 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jerielle Over a year ago

Ok thanks. It is now working but how can I skip the remove in the first option? So every city the first option is always empty?

ToniWidmo Over a year ago

$('#city option:gt(0)').remove(); avoids deleting the first option so you don't have to re-add it.

Ramesh · Accepted Answer · 2013-11-27 07:53:22Z

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.

Heretic Monkey · Accepted Answer · 2023-03-29 00:21:07Z

this is the native JavaScript 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

Bart Beyers · Accepted Answer · 2013-11-27 08:00:47Z

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

Ok but what If i don't want to remove the null value in my first option?
You could also the null value server side, or add an empty option just before the for loop.

Milind Anantwar · Accepted Answer · 2013-11-27 07:48:52Z

Before for loop,add this code.

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

Working Fiddle

Rohan Kumar · Accepted Answer · 2013-11-27 07:51:55Z

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

Grant · Accepted Answer · 2017-03-30 22:59:19Z

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

Collectives™ on Stack Overflow

How to remove and replace select options using jquery?

7 Answers 7

2 Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Linked

Related