Add a new option to a select with jQuery - Electr... https://www.electrictoolbox.com/jquery-add-opti...

Search:

Categories
Apache
Add a new option to a select with Applications
Email Servers
jQuery FCKEditor
HTML and CSS
Posted in Javascript - Last updated Feb. 18, 2019
Javascript
Linux/Unix/BSD
My last jQuery post looked at how to count the number of
Microsoft SQL Server
options in a select and then clear all options from the Miscellaneous Postings
select. This post looks at how to add a new option to a MySql
select with jQuery. Networking
Nginx Web Server
OSX
Working Example PHP
Quick Tips
The following is an example showing an already populated SilverStripe
select. Clicking the "Add option" button adds a new option VMWare
to the end of the select and makes it the selected one. Windows
Clicking "Replace options" replaces them with a new set of
Recent Posts
options and then selects the "Green" one.
Showing seconds with ls on Linux and
OSX
This is the first option Show only one process with top on
Linux
Clear options Add option Replace options Change the commit message with git
Possible responses from Sendy's
Reset subscribe API call
Where did "Save for Web" go in Adobe
Note that the above example will not work if you are Photoshop?
View the message header and body
reading this in a feed reader. In this case click through to
for an email in the exim mail queue
view this post in a web browser. RamNode cheap virtual servers

Adding a single option - by appending HTML

Adding a single option can be done by appending HTML to

the select box. The select in the above example has an id
of "example" i.e. <select id="example"> and using this
method adding a new option by appending HTML can look
like this:

$('#example').append('<option value="foo" selected="selected">

This newly added option will be the selected option; to

change this behavior remove the selected="selected" part.

1 of 6 27/11/2019 11:20
Add a new option to a select with jQuery - Electr... https://www.electrictoolbox.com/jquery-add-opti...

To avoid having to write and append HTML and stick with a

more Javascript approach the new option can be
appended with jQuery by creating a new option object.
This next example does not work correctly in Internet
Explorer; it will add the new option but only the value and
not display any text.

Kalunga.com

$('#example').append(new Option('Foo', 'foo', true, true));

The true, true part at the end will make this item the
selected one.

Adding a single option - by appending a new

option - method 2

This method gets a handle to the options and adds a new

option to the array of options. This does work in Internet
Explorer and is the more traditional Javascript way of
adding options.

var options = $('#example').attr('options');

options[options.length] = new Option('Foo', 'foo', true, true)

Adding multiple options

Using the �nal method above this last example shows how
x

2 of 6 27/11/2019 11:20
Add a new option to a select with jQuery - Electr... https://www.electrictoolbox.com/jquery-add-opti...

'red' : 'Red',
'blue' : 'Blue',
'green' : 'Green',
'yellow' : 'Yellow'
};
var selectedOption = 'green';

var select = $('#example');

if(select.prop) {
var options = select.prop('options');
}
else {
var options = select.attr('options');
}
$('option', select).remove();

$.each(newOptions, function(val, text) {

options[options.length] = new Option(text, val);
});
select.val(selectedOption);

Lines 1 to 7 de�ne the new options with an associative

array and the one which will be selected. This is what
might have been retrieved from an AJAX call.

Lines 9 to 15 cache a handle to #example and its options.

Note that from jQuery 1.6 you can't get a handle to the
options using .attr('options') but it can be done with
.prop('options') instead. This is why there's a test to see if
.prop() is available.

Line 16 removes all the existing options.

Lines 18 to 20 loop through the new options and add them

to the select box.

And �nally line 21 sets the selected option.

Related posts:

Get the number of options in a select with jQuery

jQuery Form Selectors
Post a form to a popup window with Javascript and
jQuery
Accessing form elements by name with jQuery
Clear a form with jQuery
x

3 of 6 27/11/2019 11:20
Add a new option to a select with jQuery - Electr... https://www.electrictoolbox.com/jquery-add-opti...

Comments

4 of 6 27/11/2019 11:20
Add a new option to a select with jQuery - Electr... https://www.electrictoolbox.com/jquery-add-opti...

Comments Community  Avatar

 Recommend 16 t Tweet f Share Sort by Oldest

Join the discussion…

Cleyton Ferrari • 9 years ago

Valeu Cara, vai em português mesmo! obrigado já
estava a 2 horas procurando isso!
9△ ▽ 1 • Reply • Share ›

Jiturc889 • 9 years ago

how to generate select box and populate it using jquery
4△ ▽ 1 • Reply • Share ›

Chris Hope Mod > Jiturc889 • 9 years ago

There are a few different ways to generate a
select box depending on your data source. Take a
look at this post http://www.electrictoolbox.... and
the ones it links to and it shows one of the
methods.
1△ ▽ • Reply • Share ›

Scar Poul • 9 years ago

This works great, thanks! However I need to populate a
select box based on a value from another one. If I just
put an if statement and do this "append" on the select
box (assuming it should be performed on document
load), nothing happens though. Any forceful approach to
this so it does the same thing? Cheers!
2△ ▽ • Reply • Share ›

Scar Poul > Scar Poul • 9 years ago

Sorry, this is not so clear. I meant to say "on load"
in the first sentence. Have been struggling with
this for a while. Any help highly appreciated.
△ ▽ 1 • Reply • Share ›

Chris Hope Mod > Scar Poul • 9 years ago

This post here should help you:
http://www.electrictoolbox....
2△ ▽ • Reply • Share ›

Scar Poul > Chris Hope • 9 years ago

Thanks Chris. I've not expressed myself
correctly. Sorry for that. I got what you
x
great with the select box

document load. I need t

into a variable value and

5 of 6 27/11/2019 11:20
Add a new option to a select with jQuery - Electr... https://www.electrictoolbox.com/jquery-add-opti...

Contact - Copyright Info - Privacy Policy

6 of 6 27/11/2019 11:20