How to add multiple options to select in JavaScript dynamically?

In this article, we will explore how to dynamically add multiple options to a <select> element using JavaScript.

This dynamic option addition is particularly useful when you want to populate a dropdown list with data that may change or come from various sources.

Method 1: Using the createElement() Method #

One common approach to adding multiple options to a <select> element dynamically is by using the createElement() method.

<select id="mySelect"></select>
<script>
 const select = document.getElementById("mySelect");
 const optionsData = ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"];

 optionsData.forEach((optionText, index) => {
  const option = document.createElement("option");
  option.value = `value${index + 1}`;
  option.text = optionText;
  select.appendChild(option);
 });
</script>

Explanation:

1. We select the <select> element by its ID.
2. We define a data source (e.g. array) containing the option text.
3. Inside the loop, we create new <option> elements using createElement() method and customize their value and text properties before appending them to the <select>.

Method 2: Using InnerHTML Property #

Another approach is to use the innerHTML property of the <select> element to add options dynamically.

Conclusion #

In this article, we've explored two effective methods for adding multiple options to a <select> element dynamically using JavaScript.