In this article I will explain with an example, how to reset (clear) DropDownList selection (selected value) using JavaScript and jQuery.
Reset (Clear) DropDownList selection (selected value) using JavaScript
The following HTML Markup consists of an HTML DropDownList (DropDown) control and a Button.
When the Button is clicked, the Reset JavaScript function is executed. Inside this function, the SelectedIndex property of the DropDownList is set to 0 (First Item).
<select id="ddlFruits" style="width: 150px;">
<option value="0">Please select</option>
<option value="1">Mango</option>
<option value="2">Apple</option>
<option value="3">Banana</option>
<option value="4">Guava</option>
<option value="5">Pineapple</option>
<option value="6">Papaya</option>
<option value="7">Grapes</option>
</select>
<br />
<hr />
<input type="button" id="btnReset" value="Reset" onclick="Reset();" />
<script type="text/javascript">
function Reset() {
var dropDown = document.getElementById("ddlFruits");
dropDown.selectedIndex = 0;
}
</script>
Reset (Clear) DropDownList selection (selected value) using jQuery
The following HTML Markup consists of an HTML DropDownList (DropDown) control and a Button.
When the Button is clicked, the jQuery click event handler is executed. Inside this event handler, the SelectedIndex property of the DropDownList is set to 0 (First Item).
<select id="ddlFruits" style="width: 150px;">
<option value="0">Please select</option>
<option value="1">Mango</option>
<option value="2">Apple</option>
<option value="3">Banana</option>
<option value="4">Guava</option>
<option value="5">Pineapple</option>
<option value="6">Papaya</option>
<option value="7">Grapes</option>
</select>
<br />
<hr />
<input type="button" id="btnReset" value="Reset" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnReset").bind("click", function () {
$("#ddlFruits")[0].selectedIndex = 0;
});
});
</script>
Screenshot
![Reset (Clear) DropDownList selection (selected value) using JavaScript and jQuery]()
Demo
Downloads
