Using Jquery to reset a select box

Question

I'm having difficulty with using jQuery to reset a value of a select box. My code is as follows:

HTML:

<form id="myform">
  <select name="myselect" id="myselect" value=""> 
    <option value="">Default</option>
    <option value="1">Option 1</option>
    <option value="2" selected>Option 2</option>
    <option value="3">Option 3</option>
  </select>  
  <input type="submit" value="Go">
  <input type="reset" class="reset" value="Reset form">  
</form>

Javascript:

​$("#myform .reset").click(function() {
    $('#myselect').attr('value','');
    alert($('#myselect').attr('value'));
});​

As you can see option 2 is selected, but I want to reset the select box to "Default". I've tried various methods including attr->selectedIndex but all have the same affect, it briefly changes to Default (As can be seen if you look at the form when the "Alert box" pops up, but as soon as the alert box is closed, or the alert line removed, it jumps back to the currently selected option 2.

I think this may be a jQuery bug, I've tried many different versions, from 1.6 to edge, all with same effect.

For ease I've added a jsfiddle: http://jsfiddle.net/ux2f2/1/

Hope I've included everything as this is my first post, but im a long time reader :) Love this site!

Answer 1

You don't need any javascript to reset this simple form. Just use the attribute selected in your (X)HTML

<form id="myform">
  <select name="myselect" id="myselect" value=""> 
    <option selected="selected">Default</option>
    <option value="1">Option 1</option>
    <option value="2" selected>Option 2</option>
    <option value="3">Option 3</option>
  </select>  
  <input type="submit" value="Go">
  <input type="reset" class="reset" value="Reset form">  
</form>

If you really want to use jQuery, we can do this :

$("#myform .reset").click(function() {
    $('#myselect').prop('selectedIndex', -1);
});

the value "-1", means "reset"