jQuery

Add/Create dynamic DropDownList in HTML using jQuery

Here Laxikant has explained with an example, Add/Create dynamic DropDownList in HTML using jQuery.
When the user Add Button is clicked, a DropDownList will be dynamically created with OPTIONS and added to the Page using jQuery.

In this blog I will explain with an example, how to Add/Create dynamic DropDownList in HTML using jQuery.

When the Add Button is clicked, a DropDownList will be dynamically created with OPTIONS and added to the Page using jQuery.

Add/Create dynamic DropDownList in HTML using jQuery

The following HTML consists of a HTML Button which whenever you clicked will dynamically create and add DropDownList and an HTML DIV to which the dynamic DropDownLists will be added.

Whenever you cliced the “Add DropDownList” button, the “DynamicAddDropDownList()” JavaScript function is called. Inside the JavaScript function, first a JSON Array is generated, then using loop all items from the array are added to the dynamic DropDownList element.

For the Remove functionality, a dynamic Button named Remove is created and added to the HTML DIV which contains the DropDownList. You can see The Remove button is also assigned with an OnClick event handler, first the reference the child DIV element which contains the DropDownList and also the Remove Button is determined and then using the reference, the HTML DIV is removed.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function DynamicAddDropDownList() {
            //Build an array containing Customer records.
            var users = [
                { UserId: 1, Name: "Kishan Yadav" },
                { UserId: 2, Name: "Laxmi Kant Upadhyay" },
                { UserId: 3, Name: "Sujjet Singh"},
                { UserId: 4, Name: "Rakesh Singh" },
                { UserId: 5, Name: "Manish Singh" }

            ];
            //Create a DropDownList.
            var ddlUsers = $("<select />");

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

                //Set Customer Name.
                option.html(this.Name);

                //Set CustomerId.
                option.val(this.UserId);

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

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

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

            //Create a Delete Button.
            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>
</head>
<body>
    <input type="button" id="btnAdd" onclick="DynamicAddDropDownList()" value="Add DropDownList" />
    <hr />
    <div id="divContainer"></div>

</body>
</html>

Output

add-create-dynamic-dropdownlist-html-using-jquery

add-create-dynamic-dropdownlist-html-using-jquery

Leave a Reply

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