Please disable your adblock and script blockers to view this page
 

How to reset Asp.Net DropDownList or HTML dropdown using jquery

jQuery to reset Asp.Net DropDownList or HTML dropdownIntroduction:  In this article I am going to explain with example How to reset or clear asp.net dropdownlist or html dropdown selected value to set it back to its initial/default state using jquery.


Description: We all know that in asp.net we can clear dropdownlist using the server side code i.e. DropDownList1.ClearSelection() method. Same functionality can be achieved at client side using jquery very easily. There are a number of ways to reset dropdown list back to default state. I am going to share some of them through this short article.

First Method

Set the value of DropDownList to 0 which is the first item in our list. 
$('#ddlMonths').val('0');

If the value of first item in dropdownlist is 1: 
$('#ddlMonths').val('1');

If the value of first item in dropdownlist is -1 :
$('#ddlMonths').val('-1');

If the value of first item in dropdownlist is “—Select--” :
$('#ddlMonths').val('--Select--');

Second Method

Set the very first item of the list as selected.
If using 1.6 or higher version of jquery

$('#ddlMonths').find('option:first').prop('selected', 'selected');
Or
$('#ddlMonths').find('option:first').prop('selected', true);

If using lower than 1.6 version of jquery

$('#ddlMonths').find('option:first').attr('selected', 'selected');
Or
$('#ddlMonths').find('option:first').attr('selected', true);

Third Method

Set the very first item of the list as selected.
If using 1.6 or higher version of jquery

$('#ddlMonths option:eq(0)').prop('selected', 'selected');
Or
$('#ddlMonths option:eq(0)').prop('selected', true);

If using lower than 1.6 version of jquery

$('#ddlMonths option:eq(0)').attr('selected', 'selected');
Or
$('#ddlMonths option:eq(0)').attr('selected', true);

Fourth Method

Set SelectedIndex of DropDownList to 0, which is the first item in our DropDownList 

$('#ddlMonths').get(0).selectedIndex = 0;

Implementation: Let’s check these methods by implementing it.

HTML Source Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Reset HTML dropdown or Asp.Net DropDownList using jQuery </title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script type="text/javascript">
        function ResetDropDownList() {
            $('#ddlMonths').val('0');
            //or you can uncomment any of the method commented below. All works fine.

            //$('#ddlMonths').val('--Select--');

            //$('#ddlMonths').find('option:first').prop('selected', 'selected');
            //$('#ddlMonths').find('option:first').prop('selected', true);
            //$('#ddlMonths').find('option:first').attr('selected', 'selected');
            //$('#ddlMonths').find('option:first').attr('selected', true);

            //$('#ddlMonths option:eq(0)').prop('selected', 'selected');
            //$('#ddlMonths option:eq(0)').prop('selected', true);

            //$('#ddlMonths option:eq(0)').attr('selected', 'selected');
            //$('#ddlMonths option:eq(0)').attr('selected', true);

            //$('#ddlMonths').get(0).selectedIndex = 0;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <fieldset style="width:350px;">
                <legend>Reset HTML dropdown or Asp.Net DropDownList</legend>
                Select Month:
            <asp:DropDownList ID="ddlMonths" runat="server" Width="180px">
                <asp:ListItem Value="0" Text="--Select--"></asp:ListItem>
                <asp:ListItem Value="1" Text="January"></asp:ListItem>
                <asp:ListItem Value="2" Text="february"></asp:ListItem>
                <asp:ListItem Value="3" Text="March"></asp:ListItem>
                <asp:ListItem Value="4" Text="April"></asp:ListItem>
                <asp:ListItem Value="5" Text="May"></asp:ListItem>
                <asp:ListItem Value="6" Text="June"></asp:ListItem>
                <asp:ListItem Value="7" Text="July"></asp:ListItem>
                <asp:ListItem Value="8" Text="August"></asp:ListItem>
                <asp:ListItem Value="9" Text="September"></asp:ListItem>
                <asp:ListItem Value="10" Text="October"></asp:ListItem>
                <asp:ListItem Value="11" Text="November"></asp:ListItem>
                <asp:ListItem Value="12" Text="December"></asp:ListItem>
            </asp:DropDownList>
                <asp:Button ID="btnReset" runat="server" OnClientClick="ResetDropDownList()" Text="Reset" />

                <%--If you want HTML dropdown instead of Asp.Net DropDownList then comment out
             the above dropdownlist and button control and uncomment below section--%>
            
          <%--  Select Month:                       
            <select id="ddlMonths">
                <option value="0">--Select--</option>
                <option value="1">January</option>
                <option value="2">february</option>
                <option value="3">March</option>
                <option value="4">April</option>
                <option value="5">May</option>
                <option value="6">June</option>
                <option value="7">July</option>
                <option value="8">August</option>
                <option value="9">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
            </select>
                <input type="button" id="btnReset" onclick="ResetDropDownList()" value="Reset" />--%>
            </fieldset>
        </div>
    </form>
</body>
</html>

Now over to you:
"A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates." 
Previous
Next Post »

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily.. ConversionConversion EmoticonEmoticon