Open In App

How to Create a Dropdown List with Array Values using JavaScript ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

In this article, we will see how to add elements to the select element from the JavaScript array. We can also get selected values in the dropdown list using JavaScript. Here we will populate the dropdown list with an array. Below is a description of popular approaches used in JavaScript.

Approach 1: Using Pure JavaScript

Utilizes pure JavaScript to dynamically populate a dropdown list with array values. The GFG_Fun() the function iterates through the array, creating and appending option elements to the dropdown.

Example: In this example, the length property is used to traverse the elements of the array and on each element create an option element and append this new element to the select element by appendChild() method. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Populate dropdown list
        with array values
    </title>
</head>
 
<body style="text-align:center;">
 
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <h2>
        Click on Button to Populate dropdown
        list with array values
    </h2>
 
    <select id="arr">
        <option>Dropdown Items</option>
    </select>
    <br><br>
 
    <button onclick="GFG_Fun();">
        Click Here
    </button>
 
    <h2 id="GFG" style="color: green;"></h2>
 
    <script>
        let res = document.getElementById('GFG');
        let select = document.getElementById("arr");
        let elmts = ["HTML", "CSS", "JS", "PHP", "jQuery"];
 
        // Main function
        function GFG_Fun() {
            for (let i = 0; i < elmts.length; i++) {
                let optn = elmts[i];
                let el = document.createElement("option");
                el.textContent = optn;
                el.value = optn;
                select.appendChild(el);
            }
            res.innerHTML = "Elements Added";
        }
    </script>
</body>
 
</html>


Output:

dropdown

Approach 2: Using jQuery

Employs jQuery to dynamically populate a dropdown list with array values. The GFG_Fun() function leverages jQuery’s $.each to iterate through the array, creating and appending option elements to the dropdown.

Example: In this example, the each() method is used to traverse the elements of the array and on each element create an option element and append this new element to the select element by append() method in JQuery.  

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Populate dropdown list
        with array values
    </title>
 
    <script src=
    </script>
</head>
 
<body style="text-align:center;">
 
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <h2>
        Click on Button to Populate dropdown
        list with array values
    </h2>
 
    <select id="arr">
        <option>Dropdown Items</option>
    </select>
    <br><br>
 
    <button onclick="GFG_Fun();">
        Click Here
    </button>
 
    <h2 id="GFG" style="color: green;"></h2>
 
    <script>
        let res = document.getElementById('GFG');
        let select = document.getElementById("arr");
        let elmts = ["HTML", "CSS", "JS", "PHP", "jQuery"];
 
        // Main function
        function GFG_Fun() {
            $.each(elmts, function (i, p) {
                $('#arr').append($('<option></option>')
                    .val(p).html(p));
            });
 
            res.innerHTML = "Elements Added";
        }
    </script>
</body>
 
</html>


Output:

dropdown

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.



Last Updated : 22 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads