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