915

What's the easiest way to add an option to a dropdown using jQuery?

Will this work?

$("#mySelect").append('<option value=1>My option</option>');
Improve this question
2
  • 30
    Or use $("#mySelect").html(....) to replace the current options with the new ones. Commented Mar 30, 2012 at 7:31
  • Why not simply? $('<option/>').val(optVal).text('some option').appendTo('#mySelect') Commented Sep 25, 2020 at 15:49

31 Answers 31

Reset to default
1
2
1047

Personally, I prefer this syntax for appending options:

$('#mySelect').append($('<option>', {
    value: 1,
    text: 'My option'
}));

If you're adding options from a collection of items, you can do the following:

$.each(items, function (i, item) {
    $('#mySelect').append($('<option>', { 
        value: item.value,
        text : item.text 
    }));
});
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

this will be quite slow if you're adding a lot of options, compared to just building up a html string and appending it
KUDOS! I had to add an ID to the option as well, and this is the only way I could find that would add the ID (just add another line below "Text:" saying "ID:"
384

This did NOT work in IE8 (yet did in FF):

$("#selectList").append(new Option("option text", "value"));

This DID work:

var o = new Option("option text", "value");
/// jquerify the DOM object 'o' so we can use the html method
$(o).html("option text");
$("#selectList").append(o);
Improve this answer

Comments

143

You can add option using following syntax, Also you can visit to way handle option in jQuery for more details.

  1. $('#select').append($('<option>', {value:1, text:'One'}));

  2. $('#select').append('<option value="1">One</option>');

  3. var option = new Option(text, value); $('#select').append($(option));

Improve this answer

1 Comment

The second one has an incorrect attribute in the option tag (value instead of val). The correct code should be $('select').append('<option value="1">One</option>');
47

This is very simple:

$('#select_id').append('<option value="five" selected="selected">Five</option>');

or

$('#select_id').append($('<option>', {
                    value: 1,
                    text: 'One'
                }));
Improve this answer

Comments

45

If the option name or value is dynamic, you won't want to have to worry about escaping special characters in it; in this you might prefer simple DOM methods:

var s= document.getElementById('mySelect');
s.options[s.options.length]= new Option('My option', '1');
Improve this answer

4 Comments

Doesn't look so simple to me!!
This is simple in javascript terms, jquery has made things too easy for people
document.getElementById('mySelect').add(new Option('My option','1')); // if IE8 or better
Good point. But also possible with standard jquery methods. Say let option=$('<option>caption</option>'); option.attr('value', myval); $('select').append(option);.
39

Option 1-

You can try this-

$('#selectID').append($('<option>',
 {
    value: value_variable,
    text : text_variable
}));

Like this-

for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append($('<option>',
     {
        value: i,
        text : "Option "+i 
    }));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id='mySelect'></select>

Option 2-

Or try this-

$('#selectID').append( '<option value="'+value_variable+'">'+text_variable+'</option>' );

Like this-

for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append( '<option value="'+i+'">'+'Option '+i+'</option>' );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id='mySelect'></select>

Improve this answer

Comments

20

That works well.

If adding more than one option element, I'd recommend performing the append once as opposed to performing an append on each element.

Improve this answer

Comments

18

for whatever reason doing $("#myselect").append(new Option("text", "text")); isn't working for me in IE7+

I had to use $("#myselect").html("<option value='text'>text</option>");

Improve this answer

1 Comment

I am using that same syntax (new Option(...) on Android Chrome browser (on a phone) and it isn't working there either.
18

To help performance you should try to only alter the DOM once, even more so if you are adding many options. 

var html = '';

for (var i = 0, len = data.length; i < len; ++i) {
    html.join('<option value="' + data[i]['value'] + '">' + data[i]['label'] + '</option>');
}           

$('#select').append(html);
Improve this answer

2 Comments

to help performance you should use string.join() for concatenating strings
This is a great solution. I had an issue with "join()" in the example not being a valid function, but this solution allows you to use a jQuery "promise" to determine when all options have been added and the DOM is done updating. With the other solutions that add options one by one, this cannot be done as easily. Replace the last line in the example with the following to take an action only after the DOM modification is complete: $.when($('#select').append(html)).done(function () { callSomeFunctionThatRequiresOptionsToBeSet() });
18

Why not simply?

$('<option/>')
  .val(optionVal)
  .text('some option')
  .appendTo('#mySelect')

Test here:

for (let i=0; i<10; i++) {
  $('<option/>').val(i).text('option ' + i).appendTo('#mySelect')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mySelect"></select>

Improve this answer

Comments

15 
$('#mySelect').empty().append('<option value=1>My option</option>').selectmenu('refresh');
Improve this answer

1 Comment

Unless I am mistaken, this solution not only requires jQuery, but also jQueryUI. selectmenu() is not part of the jQuery core and is a jQueryUI widget. That makes it a pretty heavy-handed solution, no?
13

I like to use non jquery approach:

mySelect.add(new Option('My option', 1));
Improve this answer

2 Comments

I like it being being non-jquery ;) Don't see that too often
Yeah, and although I can't question jquery power, there are cases it doesn't simplify things.
11 
var select = $('#myselect');
var newOptions = {
                'red' : 'Red',
                'blue' : 'Blue',
                'green' : 'Green',
                'yellow' : 'Yellow'
            };
$('option', select).remove();
$.each(newOptions, function(text, key) {
    var option = new Option(key, text);
    select.append($(option));
});
Improve this answer

Comments

11

You can add options dynamically into dropdown as shown in below example. Here in this example I have taken array data and binded those array value to dropdown as shown in output screenshot

Output:

enter image description here

var resultData=["Mumbai","Delhi","Chennai","Goa"]
$(document).ready(function(){
   var myselect = $('<select>');
     $.each(resultData, function(index, key) {
	     myselect.append( $('<option></option>').val(key).html(key) );
       });
      $('#selectCity').append(myselect.html());
});
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>

<select  id="selectCity">

</select>

Improve this answer

Comments

10

Not mentioned in any answer but useful is the case where you want that option to be also selected, you can add:

var o = new Option("option text", "value");
o.selected=true;
$("#mySelect").append(o);
Improve this answer

1 Comment

Thanks, i needed to preselect an option generated from json and this worked nicely.
6

If you want to insert the new option at a specific index in the select:

$("#my_select option").eq(2).before($('<option>', {
    value: 'New Item',
    text: 'New Item'
}));

This will insert the "New Item" as the 3rd item in the select.

Improve this answer

Comments

6

There are two ways. You can use either of these two.

First:

$('#waterTransportationFrom').append('<option value="select" selected="selected">Select From Dropdown List</option>');

Second:

$.each(dataCollecton, function(val, text) {            
    options.append($('<option></option>').val(text.route).html(text.route));
});
Improve this answer

Comments

5

How about this

var numbers = [1, 2, 3, 4, 5];
var option = '';

for (var i=0;i<numbers.length;i++){
     option += '<option value="'+ numbers[i] + '">' + numbers[i] + '</option>';
    }

    $('#items').append(option);
Improve this answer

Comments

4

You can append and set the Value attribute with text:

$("#id").append($('<option></option>').attr("value", '').text(''));
$("#id").append($('<option></option>').attr("value", '4').text('Financial Institutions'));
Improve this answer

Comments

3

if u have optgroup inside select, u got error in DOM.

I think a best way:

$("#select option:last").after($('<option value="1">my option</option>'));
Improve this answer

Comments

3

We found some problem when you append option and use jquery validate. You must click one item in select multiple list. You will add this code to handle:

$("#phonelist").append("<option value='"+ 'yournewvalue' +"' >"+ 'yournewvalue' +"</option>");

$("#phonelist option:selected").removeAttr("selected"); // add to remove lase selected

$('#phonelist option[value=' + 'yournewvalue' + ']').attr('selected', true); //add new selected

https://i.sstatic.net/HOjIY.png

Improve this answer

Comments

3 
$(function () {
     var option = $("<option></option>");
     option.text("Display text");
     option.val("1");
     $("#Select1").append(option);
});

If you getting data from some object, then just forward that object to function...

$(function (product) {
     var option = $("<option></option>");
     option.text(product.Name);
     option.val(product.Id);
     $("#Select1").append(option);
});

Name and Id are names of object properties...so you can call them whatever you like...And ofcourse if you have Array...you want to build custom function with for loop...and then just call that function in document ready...Cheers

Improve this answer

Comments

3

Based on dule's answer for appending a collection of items, a one-liner for...in will also work wonders:

let cities = {'ny':'New York','ld':'London','db':'Dubai','pk':'Beijing','tk':'Tokyo','nd':'New Delhi'};

for(let c in cities){$('#selectCity').append($('<option>',{value: c,text: cities[c]}))}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<select  id="selectCity"></select>

Both object values and indexes are assigned to the options. This solution works even in the old jQuery (v1.4)!

Improve this answer

Comments

3

If someone comes here looking for a way to add options with data properties

Using attr

var option = $('<option>', { value: 'the_value', text: 'some text' }).attr('family', model.family);

Using data - version added 1.2.3

var option = $('<option>', { value: 'the_value', text: 'some text' }).data('misc', 'misc-value);
Improve this answer

Comments

2 
$('#select_id').append($('<option>',{ value: v, text: t }));
Improve this answer

Comments

2

This is just a quick points for best performance

always when you are dealing with many options, build a big string and then add it to the 'select' for best performance

f.g.

var $mySelect = $('#mySelect'); var str = '';

$.each(items, function (i, item) {
    // IMPORTANT: no selectors inside the loop (for the best performance)
    str += "<option value='" + item.value + "'> " + item.text + "</option>";
});
// you built a big string

$mySelect.html(str); // <-- here you add the big string with a lot of options into the selector.
$mySelect.multiSelect('refresh');

Even faster

var str = ""; 
for(var i; i = 0; i < arr.length; i++){
    str += "<option value='" + item[i].value + "'> " + item[i].text + "</option>";
}    
$mySelect.html(str);
$mySelect.multiSelect('refresh');
Improve this answer

Comments

2

This is the way i did it, with a button to add each select tag.

$(document).on("click","#button",function() {
   $('#id_table_AddTransactions').append('<option></option>')
}
Improve this answer

2 Comments

Does it should be $(document).ready(function(){ $("#button").click(function() { $('#id_table_AddTransactions').append('<option></option>'); }); });
Yes, you're right about that. My answer didn't include the ready statement because, I focused on what solved the issue.
2

You can do this in ES6:

$.each(json, (i, val) => {
    $('.js-country-of-birth').append(`<option value="${val.country_code}"> ${val.country} </option>`);
  });
Improve this answer

Comments

2

Try

mySelect.innerHTML+= '<option value=1>My option</option>';


btn.onclick= _=> mySelect.innerHTML+= `<option selected>${+new Date}</option>`
<button id="btn">Add option</button>

<select id="mySelect"></select>

Improve this answer

Comments

1

U can try below code to append to option 

  <select id="mySelect"></select>

    <script>
          $("#mySelect").append($("<option></option>").val("1").html("My enter code hereoption"));
    </script>
Improve this answer

Comments

1
2

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.