Dynamic HTML Select Drop Down List Using JavaScript
Tags: javascript, html, css, programming
Published: 2022-05-02 14:24:28

---
canonical_url: https://softauthor.com/javascript-dynamic-html-select-drop-down/
---

By the end of this JavaScript tutorial, you’ll know how to dynamically create an HTML drop down list using select tag.

To demonstrate this, let’s build the country flag picker like the image below.

![alt text](https://softauthor.com/wp-content/uploads/2022/04/Dynamic-HTML-Select-Drop-Down-Using-JavaScript.gif)

[Declare HTML Select Wrapper Element](https://softauthor.com/javascript-dynamic-html-select-drop-down/#declare-html-select-wrapper-element)
[Create JavaScript Object Model](https://softauthor.com/javascript-dynamic-html-select-drop-down/#javascript-data-object-model)
[Add Options Dynamically To Select Element](https://softauthor.com/javascript-dynamic-html-select-drop-down/#add-options-dynamically-to-select-element)
[Attach Change Event To Select Drop Down List](https://softauthor.com/javascript-dynamic-html-select-drop-down/#attach-change-event-to-select-drop-down-list)

###Declare HTML Select Wrapper Element

First, create a select tag with an id called **countriesDropDown** that you want to add the options dynamically inside.

```HTML
<select id="countriesDropDown">
</select>
```

Then, define a DOM reference of it in JavaScript.

```JavaScript
const countriesDropDown = document.getElementById("countriesDropDown");
```
###JavaScript Data Object

Here is the data model as a JavaScript object called **countriesData** and it has a few properties with country names as keys and flag icons as values.

```JavaScript
const countriesData = {
  "Australia": "",
  "Canada": "",
  "UK": "",
  "USA": ""
}
```

Normally, you would want to fetch data from an external source like **database** or **api**. For simplicity sake, I just use the JavaScript object instead.

>_This method, often called data-driven approach, is super cool because you can add or delete items from the drop down list without touching the code._

###Add Options Dynamically To Select Element

Next, iterate through the **countriesData** object using **for..in** loop and create a variable called **key** in the loop header which will hold the key of each property, in this case, **country name**.

```JavaScript
for (let key in countriesData) {
  let option = document.createElement("option");
  option.setAttribute('value', data[key]);

  let optionText = document.createTextNode(key);
  option.appendChild(optionText);

  countriesDropDown.appendChild(option);
}
```

Inside the loop, create an **option** element and store in the variable called **option**.

Then, set a **value** attribute to the option element and assign its value to the value of the property from the **countriesData** object on each iteration.

>_I know its a lot of using the word “value” and I hope you are still following along…_

Next, assign the value of the **key** variable that was declared in the loop header to the variable called **optionText**.

After that, append **optionText** to the **option** element.

Finally, append the option element to the **countriesDropDown** that was declared earlier in this tutorial.

If you run the app and open up the console, you can see all the options are dynamically added to the select tag.

![alt text](https://softauthor.com/wp-content/uploads/2022/04/Dynamic-HTML-Select-Drop-Down-Using-JavaScript-1-1.png)

Nice!

###Attach Change Event To Select Drop Down List

Now, I want to show the flag icon on the browser that was added to the value attribute of the option element when it is clicked.

To do that, create a div with an id called **flag-icon** inside the index.html file.

```HTML
<div id="flag-icon">
</div>
```

Then, create a DOM reference to the **flag-icon** in JavaScript.

```JavaScript
const flagIcon = document.getElementById("flag-icon");
```

Now, I want to only show a flag icon when an appropriate country is selected from the select drop down list.

To do that, attach a **change** event to the select element.

```JavaScript
countriesDropDown.addEventListener("change", e => {
   flagIcon.innerHTML = e.target.value;
})
```

Then, get the value from the event object that was passed into the callback arrow function of the **change** event and set the value to the **innerHTML** of the flag.

![alt text](https://softauthor.com/wp-content/uploads/2022/04/Dynamic-HTML-Select-Drop-Down-Using-JavaScript.gif)

###Conclusion:

Now, you’ve learnt how to dynamically create HTML Select drop down list in JavaScript using data-driven approach. This way you can have 4 options or 400 options in your data source without touching the code and it just will work.

You can download the source code [here](https://softauthor.com/download-dynamic-html-select-drop-down-code/).

If you’ve any question, feel free to send me a message via comment box below.

Happy Learning!