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