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

@mikbox74

This comment has been minimized.

Copy link

commented Oct 2, 2019

Thank you!

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.