Adding options to a <select> using jQuery?

Inserting a single option

Let's say you just need to tack on a single option to your <select>:

// Adding a brand new option, hot off the press!
$('#mySelect').append($('<option>', { value: 'optValue', text: 'One lonely option' }));


This line of code creates and adds a new option with 'optValue' as the value and 'One lonely option' as the display text. Remember to replace 'mySelect' with the actual Id of your <select> in the HTML.

Adding multiple options from a data collection

If you're dealing with a collection of data and need to add each piece as an option (who needs 'em one by one, anyway?):

var items = [{ value: 1, text: 'Option Uno' }, { value: 2, text: 'Option Dos' }];
// Step aside, multiple options coming through!
$.each(items, function (i, item) {
  $('#mySelect').append($('<option>', {
    value: item.value, 
    text: item.text 
  }));
});


Here, we're using jQuery's $.each to run a function on each item in our dataset. This function creates and inserts an option for every item — power of automation, folks!

Pre-selection of an option

Want to give your users a jumping start and pre-select one of the options? Well, here you go:

// VIP coming through! Preselected option in the house!
$('#mySelect').append($('<option>', {
  value: 'preselectedValue', 
  text: 'VIP Option', 
  selected: true
}));


Use the selected attribute, set it to true and voilà! The option is automatically selected upon becoming a part of the <select> family.

Pure JavaScript — No jQuery, no problem!

Sometimes all you have is vanilla JavaScript. You can still roll something good:

var select = document.getElementById('mySelect');
var option = new Option('Option Text', 'Option Value');
// Look ma, no jQuery!
select.options.add(option);


The DOM's options.add() comes in handy for times like these. It inserts the new option, no jQuery needed.

On improving efficiency

Appending options individually updates the DOM with each addition. When dealing with a large number of options, consider concatenating them as a string and adding them all at once to ensure better performance.

Dodging escaping issues

To avoid handful escaping issues (aka "The Quotes Predicament"), construct your <option> element via the object-oriented way — look, no strings:

// Dangerous quotes detected! Switching to OO mode.
var o = new Option('"Quoted" Text', 'safeValue');
$('#mySelect').append(o);


This approach ensures characters like quotes are skilfully escaped in your options' text or values.