September 16, 2021

How to Populate Select Options Using Javascript from Array

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to populate select options using javascript from array. As you already know, the select element is used to create a dropdown list. All the options in this list could be hardcoded or could be added dynamically using javascript.

There are numerous ways to dynamically populate select options, but I will demonstrate one of the simplest ways to accomplish this. This method involves the formation of a template string that contains a bunch of option elements and adding that template string as HTML to the existing select element.

In the following example, we have one empty select element and upon button click, we will dynamically add some options to it. Please have a look over the code example and the steps given below.

HTML & CSS

We have a few elements in the HTML file (div, button, and select). The div element with a class of container is just a wrapper for the rest of the elements.
The inner text for the button element is “Populate”.
As of now, we do not have any options in the dropdown list. We will add some options to it dynamically using javascript.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div class="container">
        <button>Populate</button>
        <select></select>
    </div>
    <script src="script.js"></script>
</body>
</html>

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 60px;
    justify-content: space-between;
}

select {
    width: 120px;
}

Javascript

We have selected the button element and select element using the document.querySelector() method and stored them in btnPopulate and select variables respectively.
We have a global array fruits and that contains a bunch of fruit names.
We have attached the click event listener to the button element.
In the event handler function, we are forming a template string and storing it in the options variable.
We are first looping through all items in the fruits array using the map() method.
We are using the toLowerCase() method to make sure the value of the option element should be in lowercase.
The map() method returns an array, but we need a string that is why we are using the join() method to join the items one by one using newline character (\n).
We are setting that template string as the innerHTML of the select element.

let btnPopulate = document.querySelector('button');
let select = document.querySelector('select');

let fruits  = ['Banana', 'Grapes', 'Kiwi', 'Mango', 'Orange'];

btnPopulate.addEventListener('click', () =>{
    let options = fruits.map(fruit => `<option value=${fruit.toLowerCase()}>${fruit}</option>`).join('\n');

    select.innerHTML = options;
});

You May Also Like: