<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input type="button" id = "btnAdd" onclick = "AddDropDownList()" value = "Add DropDownList" />
<hr />
<table id = "tblContainer" border="0" cellpadding="5" cellspacing="5"></table>
<script type="text/javascript">
function AddDropDownList() {
//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" }
];
//Create a DropDownList element.
var ddlCustomers = document.createElement("SELECT");
//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);
}
//Reference the container Table.
var tblContainer = document.getElementById("tblContainer");
//Add the Table row.
var row = tblContainer.insertRow(-1);
//Add the DropDownList to Table Row.
var cell = row.insertCell(-1);
cell.appendChild(ddlCustomers);
//Create a Remove Button.
var btnRemove = document.createElement("INPUT");
btnRemove.value = "Remove";
btnRemove.type = "button";
btnRemove.onclick = function () {
//Determine the reference of the Row using the Button.
var row = btnRemove.parentNode.parentNode;
//Delete the Table row using its Index.
tblContainer.deleteRow(row.rowIndex);
};
//Add the Remove Buttton to Table Row.
cell = row.insertCell(-1);
cell.appendChild(btnRemove);
};
</script>
</body>
</html>