In asp.net we can clear dropdownlist using the server side code i.e. DropDownList1.ClearSelection() method. We can do this at client side using jQuery. Jquery is fast and light as compare to server side code. So it is good to use jquery rather than write a code for this purpose. There are a number of methods to reset dropdown list back to default state.
In this article I will explain how to reset or
clear asp.net dropdownlist or html dropdown selected value
to set it back to its initial/default state using jquery.
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);
$('#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);
$('#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);
$('#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);
$('#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;
$('#ddlMonths').get(0).selectedIndex = 0;
Source Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></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><strong>Reset
DropDownList to initial Value or stage</strong></legend>
<br />
<strong>Select
Month</strong>:
<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"
/>
<br />
<%--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" />--%>
<br />
</fieldset>
</div>
</form>
</body>
</html>
0 comments:
Post a Comment