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

commented Jan 26, 2016

Perfeito! Parabéns!

@MickVazovsky

This comment has been minimized.

Copy link

commented Feb 5, 2016

Thanks

@isaiahiyede

This comment has been minimized.

Copy link

commented Feb 8, 2016

thanks really helpful

@chris-hall-hu

This comment has been minimized.

Copy link

commented Apr 3, 2016

very helpful, thanks muchly

@reshmashanbhag

This comment has been minimized.

Copy link

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

commented Sep 22, 2016

thx

@rootturk

This comment has been minimized.

Copy link

commented Oct 3, 2016

thanks bro.

@ShiroTeky

This comment has been minimized.

Copy link

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

commented Oct 28, 2017

nice

@Magniveo

This comment has been minimized.

Copy link

commented Dec 20, 2017

Good, but how I can update select?

@wasimxe

This comment has been minimized.

Copy link

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

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

commented Mar 21, 2018

Remove all items:

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

@baladkb

This comment has been minimized.

Copy link

commented Apr 11, 2018

thanks!.

@vivekrajraja

This comment has been minimized.

Copy link

commented Oct 3, 2018

great, Thanks For Sharing.

@DarkGuardsman

This comment has been minimized.

Copy link

commented Nov 30, 2018

Thank you, this worked perfectly for what I needed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.