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


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.
  1. <asp:dropdownlist ID="lstPlayers" CssClass="lst-clear" runat="server">  
  2. <asp:listitem Text="Sachin" Value="Sachin"></asp:listitem>  
  3. <asp:listitem Text="Sehwag" Value="Sehwag"></asp:listitem>  
  4. <asp:listitem Text="Dravid" Value="Dravid"></asp:listitem>  
  5. <asp:listitem Text="Yuvraj" Value="Yuvraj"></asp:listitem>  
  6. <asp:listitem Text="MS Dhoni" Value="MS Dhoni"></asp:listitem>  
  7. </asp:dropdownlist>  
  8. <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 -
  1. <script type="text/javascript" src="//"></script>  
  2. <script type="text/javascript">  
  3. $(function () {  
  4.      $("#btnClear").click(function () {  
  5.          $(".lst-clear").empty();  
  6.      });  
  7. });  
  8. </script>  
Hope you like this. Keep learning and sharing!

Rebin Infotech
Think. Innovate. Grow.