Post
Ask Question

Reset DropDownList Selection 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).
  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" onclick="Reset();" />  
  12. <script type="text/javascript">  
  13.     function Reset() {  
  14.         var dropDown = document.getElementById("ddlFruits");  
  15.         dropDown.selectedIndex = 0;  
  16.     }  
  17. </script>