Post
Ask Question

Reset DropDownList Selection 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).
  1. <select id="ddlFruits" style="width: 150px;">  
  2. <option value="0">Please select</option>  
  3. <option value="1">Mango</option>  
  4. <option value="2">Apple</option>  
  5. <option value="3">Banana</option>  
  6. <option value="4">Guava</option>  
  7. <option value="5">Pineapple</option>  
  8. <option value="6">Papaya</option>  
  9. <option value="7">Grapes</option>  
  10. </select> <br />  
  11. <hr /> <input type="button" id="btnReset" value="Reset" />  
  12. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
  13. <script type="text/javascript">  
  14.     $(function() {  
  15.         $("#btnReset").bind("click", function() {  
  16.             $("#ddlFruits")[0].selectedIndex = 0;  
  17.         });  
  18.     });  
  19. </script>