How To Clear Items of ASP.Net DropDownList Control Using jQuery

Friends,

In this post, we will see how can we clear all items of a ASP.Net DropDownList control using jQuery.

To start with, we will define a ASP.Net DropDownList control on our .aspx page and a button with the help of which we will be clearing the items of the DropDownList control. We assign it a specific class using the <strong>CssClass</strong> property that we can refer to in jQuery.

<asp:dropdownlist ID="lstPlayers" CssClass="lst-clear" runat="server">
<asp:listitem Text="Sachin" Value="Sachin"></asp:listitem>
<asp:listitem Text="Sehwag" Value="Sehwag"></asp:listitem>
<asp:listitem Text="Dravid" Value="Dravid"></asp:listitem>
<asp:listitem Text="Yuvraj" Value="Yuvraj"></asp:listitem>
<asp:listitem Text="MS Dhoni" Value="MS Dhoni"></asp:listitem>
</asp:dropdownlist>
<input type="button" id="btnClear" value="Clear Items" />

 After our controls are defined, we bind the click event of the button to clear the items using the .empty() function as below -

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
     $("#btnClear").click(function () {
         $(".lst-clear").empty();
     });
});
</script>

Hope you like this. Keep learning and sharing!