Add Options to Select with JavaScript

Sometimes, we want to add options to an HTML select element with JavaScript. In this article, we will look at how to dynamically add options to an HTML select element with JavaScript.

The JavaScript HTMLSelectElement interface corresponds to the HTML <select> tag. It has several methods and properties to perform operations on the option element add(), remove(), options etc.

To get the HTMLSelectElement interface, JavaScript Document interface has methods like getElementById(), querySelector(), getElementsByTagName(), getElementsByClassName() etc.

An example of accessing an HTML <select> element is shown below.

<select id="people"></select>

We can access the HTML select tag with getElementById() or querySelector() as below.

let peopleElem = document.getElementById("people");
// let peopleElem = document.querySelector("#people");

After access, we can use the methods and properties in the HTLMSelectElement interface as follows.

peopleElem.method();
peopleElem.properties;

Access methods change depending on the HTML tag. If you want to access an element with name property, you can use getElementsByTagName etc.

Adding a single option with JavaScript

With JavaScript, we can create an option with the Option constructor as follows.

new Option()
new Option(text)
new Option(text, value)
new Option(text, value, defaultSelected)
new Option(text, value, defaultSelected, selected)

Here is an example of using the Option constructor.

let yusufOption = new Option("Yusuf Sezer");  // without specify value, value is Yusuf Sezer
let ramazanOption = new Option("Ramazan Sezer", "ramazan");  // with value

The Option constructor has defaultSelected and selected which is optional. If we do not specify a value, the default is false.

The following example shows the use of defaultSelected and selected parameters.

let mehmetOption = new Option("Mehmet Sezer", "mehmet");
let sinanOption = new Option("Sinan Sezer", "sinan");
let ramazanOption = new Option("Ramazan Sezer", "ramazan");
let yusufOption = new Option("Yusuf Sezer", "yusuf", true, true); // with selected

Then, simply pass the add() method as parameters.

let peopleElem = document.getElementById("people");

let yusufOption = new Option("Yusuf Sezer");
let ramazanOption = new Option("Ramazan Sezer", "ramazan");

peopleElem.add(ramazanOption); // first call always selected
peopleElem.add(yusufOption);

By default the first add() method call is always selected. We can change the default behavior by giving the Option constructor parameters as follows.

let peopleElem = document.getElementById("people");

let yusufOption = new Option("Yusuf Sezer", "yusuf", true, true); // changes selection behavior
let ramazanOption = new Option("Ramazan Sezer", "ramazan");

peopleElem.add(ramazanOption);
peopleElem.add(yusufOption);

Let’s put it all together.

<select id="people"></select>

<script>
  let peopleElem = document.getElementById("people");
  // let peopleElem = document.querySelector("#people"); // other access way

  let mehmetOption = new Option("Mehmet Sezer", "mehmet");
  let sinanOption = new Option("Sinan Sezer", "sinan");
  let ramazanOption = new Option("Ramazan Sezer", "ramazan");
  let yusufOption = new Option("Yusuf Sezer", "yusuf", true, true);

  peopleElem.add(ramazanOption);
  peopleElem.add(sinanOption);
  peopleElem.add(mehmetOption);
  peopleElem.add(yusufOption);
</script>

Adding a single option by dynamically add HTML element

The Document interface has the createElement, which dynamically create an HTML tag.

let yusufOption = document.createElement("option");
yusufOption.text = "Yusuf Sezer";

let ramazanOption = document.createElement("option");
ramazanOption.text = "Ramazan Sezer";

Then, like before just pass the add() method as follows.

let peopleElem = document.querySelector("#people");

let yusufOption = document.createElement("option");
yusufOption.text = "Yusuf Sezer";

let ramazanOption = document.createElement("option");
ramazanOption.text = "Ramazan Sezer";

peopleElem.add(ramazanOption); // first call always selected
peopleElem.add(yusufOption);

As before, by default the first call to add() method is always selected. We can change the default behavior by setting the selected property as follows.

let yusufOption = document.createElement("option");
yusufOption.text = "Yusuf Sezer";
yusufOption.selected = true;  // changes selection behavior

An example of select add option dynamically is given below.

<select id="people"></select>

<script>
  let peopleElem = document.getElementById("people");
  // let peopleElem = document.querySelector("#people"); // other access way

  let mehmetOption = document.createElement("option");
  mehmetOption.value = "mehmet";
  mehmetOption.text = "Mehmet Sezer";

  let sinanOption = document.createElement("option");
  sinanOption.value = "sinan";
  sinanOption.text = "Sinan Sezer";

  let ramazanOption = document.createElement("option");
  ramazanOption.value = "ramazan";
  ramazanOption.text = "Ramazan Sezer";

  let yusufOption = document.createElement("option");
  yusufOption.value = "yusuf";
  yusufOption.text = "Yusuf Sezer";
  yusufOption.selected = true;

  peopleElem.add(ramazanOption);
  peopleElem.add(sinanOption);
  peopleElem.add(mehmetOption);
  peopleElem.add(yusufOption);
</script>

Note: You can also use appendChild and append methods inherited from Element and Node interface.

Adding multiple options

Through the loop like for of and foreach, we can add multiple option to select as in the follow example.

<select id="people"></select>

<script>
  let peopleElem = document.getElementById("people");
  // let peopleElem = document.querySelector("#people"); // other access way

  let people = ["Yusuf Sezer", "Ramazan Sezer", "Mehmet Sezer", "Sinan Sezer"];

  // foreach
  people.forEach((element, key) => {
    peopleElem.add(new Option(element));
    //peopleElem[key] = new Option(element, key);
  });

  // for of
  for (person of people) {
    peopleElem.add(new Option(person));
  }
</script>

JavaScript has multiple ways to access and dynamically add options to the HTML <select> tag. You can choose one of them according to your expectations.