Dynamically Add OPTIONs to DropDownList SELECT using jQuery

In this article I will explain with an example, how to dynamically add (insert) OPTIONs to DropDownList (HTML SELECT) using jQuery.

Using a FOR loop, the items from Array will be added as OPTION to DropDownList (HTML SELECT) using jQuery.

Dynamically Add OPTIONs to DropDownList (SELECT) using jQuery

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 = $("#ddlCustomers");

$(customers).each(function () {

var option = $("<option />");

//Set Customer Name in Text part.

option.html(this.Name);

//Set Customer CustomerId in Value part.

option.val(this.CustomerId);

//Add the Option element to DropDownList.

ddlCustomers.append(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 jQuery, please refer my article, Add (Insert) Items (Options) to DropDownList on Button click using jQuery.

Screenshot