How to Add and Remove item in DropDownList using JQuery?

DropDownList – 

DropDownList is a control which is used for showing collection of items on the web page. We can bind DataSource to DropDownList control also, It has some inbuilt methods like Add () and Remove (), using these method we can perform Insertion and deletion operations on DropDownList's items. But these methods are server side methods.

In some of the cases we want to perform Insertion and deletion operation on DropDownList's items on client side means we don't want to perform server side functionality for this, In this article , I am explaining - How to Add and Remove item in DropDownList using JQuery?

For this, I have designed page like this-

.aspx code-
<table>
                <tr>
                    <td>
                        <asp:Button ID="btnAdd" runat="server" Text="Add Item" OnClientClick="return funInsert();" />
                    </td>
                    <td colspan="2" align="center">
                        <asp:DropDownList ID="drpList" runat="server" Width="100">
                            <asp:ListItem Value="1">a</asp:ListItem>
                            <asp:ListItem Value="2">b</asp:ListItem>
                            <asp:ListItem Value="3">c</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                    <td>
                        <asp:Button ID="btnDelete" runat="server" Text="Remove Item" OnClientClick=" return funDelete();" />
                    </td>
                </tr>
 </table>


Now to perform insertion and deletion operation on DropDownList's Items, I have defined two client side functions-

1. funInsert() - For Insertion operation
2. funDelete() - For deletion operation
 
   <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //Function to insert item to DropDownList
        function funInsert() {
            var item = prompt("Enter Item to add- ");
            if (item == null) {
                alert("First enter item");
            }
            else {
                var count = $("#<%= drpList.ClientID  %> option ").length;

                //Adding item to DropDownList
                $("#<%= drpList.ClientID %>").append("<option value=" + (parseInt(count) + parseInt(1)) + ">" + item + " </option>");
            }
            return false;
        }

        //Function to remove item from DropDownList
        function funDelete() {
            var count = $("#<%= drpList.ClientID  %> option ").length;
            if (count == 0) {
                alert("No item to remove");
            }
            else {
                //Removing item from DropDownList
                $("#<%= drpList.ClientID %> option[value=" + count + "]").remove();
            }

            return false;
        }
    </script> 

In above code, to perform Insertion operation on items, I have defined funInsert() function.
Here for inserting new item, I am prompting the user for entering new item as input using prompt ().

Like this-

After getting input from user, I am inserting this item to the DropDownList using append () method.

Like this-

  //Adding item to DropDownList
                $("#<%= drpList.ClientID %>").append("<option value=" + (parseInt(count) + parseInt(1)) + ">" + item + " </option>");

   Here "item" is variable which is representing entered item by user. After executing this code item will be added to DropDownList.

Like this-

In image you can see newly added item.

 Now to delete item from DropDownList, I have defined one client side function-   funDelete().
 In this function, I have written code to delete last item from the DropDownList. For this first I am getting count of items as "count" variable.

To delete item I have used this code-

  //Removing item from DropDownList
                $("#<%= drpList.ClientID %> option [value=" + count + "]").remove();

Here I have used remove() method, For this first I have got last item using JQuery and deleted that item using remove() method.

Like this-
 

You can see image last item- "New Item4" has been deleted from the DropDownList.

Note- I have used JQuery for this functionality, so it is must that JQuery plug-in should be included on the page, like I have included on top of the page.


Thanks