In this article I will explain with an example, how to dynamically populate DropDownList i.e. HTML Select element on Button click from JSON Array using JavaScript.
The JSON Array will be read and parsed and then one by one the each JSON object from the JSON Array will be added as Items (Options) to DropDownList using plain JavaScript.
 
 
Populate DropDownList from JSON Array using JavaScript
The following HTML Markup consists of an HTML DropDownList and a Button. When the Button is clicked, the JSON Array will be parsed and its items will be used to populate the HTML DropDownList.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <input type="button" id="btnGenerate" value="Populate DropDownList" onclick="PopulateDropDownList()" />
    <hr />
    <select id="ddlCustomers">
    </select>
    <script type="text/javascript">
        function PopulateDropDownList() {
           //Build an array containing Customer records.
            var customers = [
                { CustomerId: 1, Name: "John Hammond", Country: "United States" },
                { CustomerId: 2, Name: "Mudassar Khan", Country: "India" },
                { CustomerId: 3, Name: "Suzanne Mathews", Country: "France" },
                { CustomerId: 4, Name: "Robert Schidner", Country: "Russia" }
            ];
           
            var ddlCustomers = document.getElementById("ddlCustomers");
           
            //Add the Options to the DropDownList.
            for (var i = 0; i < customers.length; i++) {
                var option = document.createElement("OPTION");
 
                //Set Customer Name in Text part.
                option.innerHTML = customers[i].Name;
 
                //Set CustomerId in Value part.
                option.value = customers[i].CustomerId;
 
                //Add the Option element to DropDownList.
                ddlCustomers.options.add(option);
            }
        }
    </script>
</body>
</html>
 
Explanation:
When the button is clicked, the PopulateDropDownList JavaScript function is called. Inside the JavaScript function, first the JSON Array is generated.
Then a loop is executed over all the items of the JSON Array and inside the loop, the values of the CustomerId and Name properties of each item is used to create and add HTML Option element to the HTML DropDownList.
Note: For more details on adding items by creating HTML Option element to HTML DropDownList using JavaScript, please refer my article, Add (Insert) Items (Options) to DropDownList on Button click using JavaScript.
 
 
Screenshot
Populate DropDownList from JSON Array using JavaScript
 
 
Demo
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Downloads