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

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.