Populate DropDownList from JSON Array using JavaScript

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.

<head>

</head>

<body>

<hr />

</select>

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