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.
<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" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <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 = $("#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
Dynamically Add OPTIONs to DropDownList (SELECT) using jQuery
 
 
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.

 
 
Demo
 
 
Downloads