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.
  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="//code.jquery.com/jquery-1.10.2.js"></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!