Adding options to select with JavaScript

Methodical way to generate options

A for loop eases the process when you wish to populate a <select> element with a range of values:

var select = document.getElementById('mainSelect');
for (var i = 12; i <= 100; i++) {
  var option = new Option(i, i);
  select.add(option);
} // A Hundred options, piece of cake!


Churning out options just became quick and simple!

Boosting performance with Fragment

While appending multiple options, you can improve performance by using a DocumentFragment:

var select = document.getElementById('mainSelect');
var fragment = document.createDocumentFragment();
for (var i = 12; i <= 100; i++) {
  var option = new Option(i, i);
  fragment.appendChild(option);
}
select.appendChild(fragment); // All aboard the fragment train!


With this approach we avoid triggering multiple reflows and improve the speed of our script.

Flexible function for option generation

Creating a reusable function makes it effortless to populate any select element provided the id and a range:

function populateSelect(id, min, max) {
  var select = document.getElementById(id);
  var fragment = document.createDocumentFragment();

  for (var i = min; i <= max; i++) {
    var option = new Option(i, i);
    fragment.appendChild(option);
  }

  select.appendChild(fragment); // It's raining options!
}

populateSelect('mainSelect', 12, 100); // Poof! Options everywhere!


With this function, you can customize your <select> elements within seconds.

Creating options from dynamic data

There might be scenarios where options need to be created based on dynamic data. Here's how you can accomplish that:

var select = document.getElementById('dynamicSelect');
var items = ['Apple', 'Banana', 'Cherry'];
items.forEach(function(item) {
  select.add(new Option(item, item.toLowerCase())); // Let's fruit this up!
});


For every item in the array, we create an option and add it to our select.

Using Option Constructor for ease

The Option constructor provides a slick way of creating options with ease:

select.add(new Option("Display Text", "valueProperty")); // Like a boss!


Call upon this method when you want an instant option without invoking createElement.

String concatenating for performance boost

In performance calling scenarios, joining options as a string can be a valuable trick:

var selectHTML = "";
for (var i = 1; i <= 10; i++) {
  selectHTML += `<option value="${i}">Option ${i}</option>`;
}

document.getElementById("mySelect").innerHTML = selectHTML; // Stuffing options like a pro!


This approach might be faster, but remember it replaces all select content and may cause event listeners on existing child elements to be evicted.

Custom prototype for extended fun

Extend the HTMLSelectElement prototype to add a populate method can really spice up your code:

HTMLSelectElement.prototype.populate = function(min, max) {
  var fragment = document.createDocumentFragment();
  
  for (var i = min; i <= max; i++) {
    var option = new Option(i, i);
    fragment.appendChild(option);
  }

  this.appendChild(fragment); // Custom method to the rescue!
};

document.getElementById("mySelect").populate(1, 10); // Who knew magic was just a function away?


This way you can easily add a method that populates a select element with options to all select elements!