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



Html
<select id="tutorials" style="width: 150px;">
    <option value="0">Please select</option>
    <option value="1">Html</option>
    <option value="2">CSS </option>
    <option value="3">jQuery</option>
    <option value="4">javascript</option>
    <option value="5">wordpress</option>
    <option value="6">drupal</option> 
</select>
<br />
<hr />
<input type="button" id="btnReset" value="Reset" />
jQuery
<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 () {
            $("#tutorials")[0].selectedIndex = 0;
        });
    });
</script>




Related Post


Latest Post


Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.