Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Add and Remove Options in Select using jQuery
$("#selectBox").append('<option value="option6">option6</option>');
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
<select id="selectBox" name="selectBox">
<option value="option1"> option1 </option>
<option value="option2"> option2 </option>
<option value="option3"> option3 </option>
<option value="option4"> option4 </option>
</select>
$('select').children('option:not(:first)').remove();
$("#selectBox option[value='option1']").remove();
@victorvaz

This comment has been minimized.

Copy link

@victorvaz victorvaz commented Jan 26, 2016

Perfeito! Parabéns!

@MickVazovsky

This comment has been minimized.

Copy link

@MickVazovsky MickVazovsky commented Feb 5, 2016

Thanks

@isaiahiyede

This comment has been minimized.

Copy link

@isaiahiyede isaiahiyede commented Feb 8, 2016

thanks really helpful

@chris-hall-hu

This comment has been minimized.

Copy link

@chris-hall-hu chris-hall-hu commented Apr 3, 2016

very helpful, thanks muchly

@reshmashanbhag

This comment has been minimized.

Copy link

@reshmashanbhag reshmashanbhag commented Aug 18, 2016

but if we do like this, after page reload the dropdown list value will be shown again

@geat

This comment has been minimized.

Copy link

@geat geat commented Sep 22, 2016

thx

@rootturk

This comment has been minimized.

Copy link

@rootturk rootturk commented Oct 3, 2016

thanks bro.

@ShiroTeky

This comment has been minimized.

Copy link

@ShiroTeky ShiroTeky commented Apr 21, 2017

This works well.
$('#myselect').children('option').remove();
and after in your ajax request or using getJSON, bind the select like this:
$('#myselect').append(new Option(value.content, value.id, false, false));

@zamalhossain

This comment has been minimized.

Copy link

@zamalhossain zamalhossain commented Oct 28, 2017

nice

@Magniveo

This comment has been minimized.

Copy link

@Magniveo Magniveo commented Dec 20, 2017

Good, but how I can update select?

@wasimxe

This comment has been minimized.

Copy link

@wasimxe wasimxe commented Jan 4, 2018

I added new option successfully but when I lost focus and click select box again, newly added option gone. any idea why?

@reks-scripts

This comment has been minimized.

Copy link

@reks-scripts reks-scripts commented Feb 28, 2018

Another way to write the example from add-options-from-array.js

$.each(selectValues, (key, value) => {
    $("<option/>", {
        "value": key,
        "text": value
    }).appendTo($("#mySelect");
});
@MatiasGallegos

This comment has been minimized.

Copy link

@MatiasGallegos MatiasGallegos commented Mar 21, 2018

Remove all items:

$("#city_id").empty();

@baladkb

This comment has been minimized.

Copy link

@baladkb baladkb commented Apr 11, 2018

thanks!.

@vivzon

This comment has been minimized.

Copy link

@vivzon vivzon commented Oct 3, 2018

great, Thanks For Sharing.

@DarkGuardsman

This comment has been minimized.

Copy link

@DarkGuardsman DarkGuardsman commented Nov 30, 2018

Thank you, this worked perfectly for what I needed

@mikbox74

This comment has been minimized.

Copy link

@mikbox74 mikbox74 commented Oct 2, 2019

Thank you!

@CSEKU160212

This comment has been minimized.

Copy link

@CSEKU160212 CSEKU160212 commented Dec 11, 2019

I want to remove one option and append another option in the same index.
Consider that:
<select id="selectBox" name="selectBox" >
<option value="option1"> option1 <option>
<option value="option2"> option2 <option>
<option value="option3"> option3 <option>
<option value="option4"> option4 <option>
<select>

After remove and append I want the options like:
<select id="selectBox" name="selectBox" >
<option value="myoption"> myoption <option>
<option value="option2"> option2 <option>
<option value="option3"> option3 <option>
<option value="option4"> option4 <option>
<select>

Is there any way to work with index?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment