How to reset Asp.Net DropDownList or HTML dropdown using jquery ~ Asp.Net,C#.Net,VB.Net,MVC,jQuery,JavaScipt,AJAX,WCF,Sql Server example

jQuery to reset Asp.Net DropDownList or HTML dropdown

Introduction: 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.

In previous articles I explained JQuery to enable disable all html or asp.net controls placed inside div based on dropdownlist selected value and Reset all asp.net controls on page at once and jQuery AJAX JSON example in Asp.net to insert data into sql server database without postback and Auto resize textarea or Asp.net multiline textbox based on content using javascript

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:

<title>Reset HTML dropdown or Asp.Net DropDownList using jQuery </title>

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>

<div>

<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:

<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="8">August</option>

<option value="9">September</option>

<option value="10">October</option>

<option value="11">November</option>

<option value="12">December</option>

</select>

</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."

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..

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

Related Post