Javascript – Adding options to a using jQuery

html-selectjavascriptjquery

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>');

Best Answer

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 
    }));
});

Related Solutions

Javascript – n “exists” function for jQuery

In JavaScript, everything is 'truthy' or 'falsy', and for numbers 0 means false, everything else true. So you could write:

if ($(selector).length)

You don't need that >0 part.

Javascript – the best way to add options to a select from a JavaScript object with jQuery

The same as other answers, in a jQuery fashion:

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value", key)
                    .text(value)); 
});

Related Topic

• Javascript – Add table row in jQuery
• Javascript – How to check if an element is hidden in jQuery
• Javascript – How to insert an item into an array at a specific index (JavaScript)
• Javascript – How to know which radio button is selected via jQuery
• Javascript – $(document).ready equivalent without jQuery
• Javascript – Get selected value in dropdown list using JavaScript
• Javascript – How to remove a specific item from an array
• Html – How to make a placeholder for a ‘select’ box