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

10 May, 2022
The task is to add elements to the select element from the JavaScript array. We can also get selected value in dropdown list using JavaScript. Here we will populate the dropdown list with an array. Below is the description of popular approaches used in JavaScript.
Example 1: 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. 
Program: 
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>         <p id="geeks" style=        "font-size:20px; font-weight:bold">    </p>           <select id="arr"></select>         <br><br>         <button onclick="GFG_Fun();">        click here    </button>         <p id="gfg" style="font-size: 26px;        font-weight: bold;color: green;">    </p>           <script>        var up = document.getElementById('geeks');        var down = document.getElementById('gfg');        var select = document.getElementById("arr");        var elmts = ["HTML", "CSS", "JS", "PHP", "jQuery"];        up.innerHTML = "Click on the button to "                    + "perform the operation"+                    ".<br>Array - [" + elmts + "]";         // Main function        function GFG_Fun() {            for (var i = 0; i < elmts.length; i++) {                var optn = elmts[i];                var el = document.createElement("option");                el.textContent = optn;                el.value = optn;                select.appendChild(el);            }            down.innerHTML = "Elements Added";        }    </script></body> </html>
Output: 
Example 2: 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.  
Program: 
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;">         <h1 style="color:green;">        GeeksforGeeks    </h1>         <p id="geeks" style=        "font-size: 20px;font-weight: bold">    </p>           <select id="arr"></select>         <br><br>         <button onclick="GFG_Fun();">        click here    </button>         <p id="gfg" style="font-size: 26px;        font-weight: bold; color: green;">    </p>           <script>        var up = document.getElementById('geeks');        var down = document.getElementById('gfg');        var select = document.getElementById("arr");        var elmts = ["HTML", "CSS", "JS", "PHP", "jQuery"];        up.innerHTML = "Click on the button to "                + "perform the operation"+                ".<br>Array - [" + elmts + "]";         // Main function        function GFG_Fun() {            $.each(elmts, function(i, p) {                $('#arr').append($('<option></option>')                            .val(p).html(p));            });            down.innerHTML = "Elements Added";        }    </script></body> </html>
Output:
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.
gabaa406
hardikkoriintern
CSS-Misc
HTML-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Create a Responsive Navbar using ReactJS
How to auto-resize an image to fit a div container using CSS?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS
HTTP headers | Content-Type