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

Last Updated : 02 Jul, 2024

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 are the methods to create a dropdown list with array values:

Table of Content

Using Pure JavaScript
Using jQuery

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;">

    <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:

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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
</head>

<body style="text-align:center;">

    <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:

How To Create A Cascading Dropdown List Using JavaScript?

PranchalKatiyar

Improve

Article Tags :

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

Using Pure JavaScript

Using jQuery

Similar Reads

Thank You!

What kind of Experience do you want to share?