Introduction: Dynamically Add Or Remove DropDownLists on Button click using jQuery

In this post, we will learn about how to Dynamically Add Or Remove DropDownLists on Button click using jQuery an example

Description:

In my previous posts I have explained various topics like Dynamic Type In C# Named Arguments In C#, Basics Of Pointers In C# Get site visitor count in asp.net, Convert generic list to datatable in Asp.Net C#.Net, Abstract Class in C# with Example.




Now in this post, I will explain about how to Dynamically Add Or Remove DropDownLists on Button click using jQuery with appropriate example.

Now create  Web form application in Visual Studio and write below lines of code in it.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
     <input type="button" id = "btnAdd" onclick = "AddDropDownList()" value = "Add DropDownList" />
    <hr />
    <div id = "dvContainer"></div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function AddDropDownList() {
            //Build an array containing Employee records.
            var customers = [
                { EmployeeID: 1, EmployeeName: "Kit Perez", Department: "UK" },
                { EmployeeID: 2, EmployeeName: "Mehul Patel", Department: "India" },
                { EmployeeID: 3, EmployeeName: "Gram Smith", Department: "France" },
                { EmployeeID: 4, EmployeeName: "Robert Schidner", Department: "Nepal" }
            ];
            //Create a DropDownList item.
            var ddlCustomers = $("<select />");

            //Add the Options to the DropDownList.
            $(customers).each(function () {
                var option = $("<option />");

                //Set Customer EmployeeName in Text part.
                option.html(this.EmployeeName);

                //Set EmployeeID in Value part.
                option.val(this.EmployeeID);

                //Add the Option element to DropDownList.
                ddlCustomers.append(option);
            });

            //Reference the container DIV.
            var dvContainer = $("#dvContainer")

            //Add the DropDownList to DIV.
            var div = $("<div />");
            div.append(ddlCustomers);

            //Create a Remove Button to get rid of dropdown.
            var btnRemove = $("<input type = 'button' value = 'Remove' />");
            btnRemove.click(function () {
                $(this).parent().remove();
            });

            //Add the Remove Buttton to DIV.
            div.append(btnRemove);

            //Add the DIV to the container DIV.
            dvContainer.append(div);
        };
    </script>
</body>
</html>

Summary

I hope you got an idea about how to Dynamically Add Or Remove DropDownLists on Button click using jQuery. I would like to have feedback from blog my  readers. Your valuable feedback, question, or comments about this article are always welcome.

Leave a Reply

Your email address will not be published. Required fields are marked *

Name *
Email *
Website