Dynamically Add Row with DropDownList using JavaScript

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

When the Add Button is clicked, a new Row with DropDownList will be dynamically created and added to the Page and when the Remove Button is clicked, the Row with DropDownList will be removed using JavaScript.

Dynamically Add Row with DropDownList using JavaScript

The following HTML Markup consists of an HTML Button which when clicked will dynamically create and add DropDownLists and an HTML DIV to which the dynamic DropDownLists will be added.

<head>

</head>

<body>

<hr />

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

var dvContainer = document.getElementById("dvContainer")

//Add the DropDownList to DIV.

var div = document.createElement("DIV");

div.appendChild(ddlCustomers);

//Create a Remove Button.

var btnRemove = document.createElement("INPUT");

btnRemove.value = "Remove";

btnRemove.type = "button";

btnRemove.onclick = function () {

dvContainer.removeChild(this.parentNode);

};

//Add the Remove Buttton to DIV.

div.appendChild(btnRemove);

//Add the DIV to the container DIV.

dvContainer.appendChild(div);

};

</script>

</body>

</html>

Explanation:

Adding Dynamic DropDownList

When the Add button is clicked, the AddDropDownList JavaScript function is called. Inside the JavaScript function, first a JSON Array is generated.

Then a dynamic DropDownList element is created and then using loop all items from the JSON array are added to the dynamic DropDownList element.

Note: For more details on populating HTML DropDownList using JSON Array, please refer my article Populate DropDownList from JSON Array using JavaScript.

Once populated the dynamic DropDownList is added to the HTML DIV which later will be added to the main Container HTML DIV.

Deleting Dynamic DropDownList

For the Delete functionality, a dynamic Button named Remove is created and added to the HTML DIV which contains the DropDownList.

The Remove button is also assigned with an OnClick event handler inside which, first the reference the child HTML DIV which contains the DropDownList and also the Remove Button is determined and then using the reference, the HTML DIV is removed.

Screenshot