使用Jquery重置选择框

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"

Answer 2

As Kolink has explained, the input of type "reset" is the cause of the problem as it resets the whole form to their default values.

The quickest solution would be to change

<input type="reset" class="reset" value="Reset form">

to

<input type="button" class="reset" value="Reset form">

or just make a clickable anchor or div be the trigger for the reset instead of the input

This way you need not make any changes to your jQuery

Answer 3

The main problem is that the reset button is resetting the form after you click it and see the alert. You need to cancel the default event. However, you can also try vanilla JS:

// add id="reset" to the reset button's HTML, then...
document.getElementById('reset').onclick = function() {
    mysel = document.getElementById('myselect');
    mysel.selectedIndex = 0;
    alert(mysel.value);
    return false;
}

Updated Fiddle

Answer 4

You should use something like:

$("select#myselect").val('').attr('selected', true);

Working fiddle of the above: http://jsfiddle.net/gsN9d/

As an alternate (newer syntax of "prop") use:

$("select#myselect").val('').prop('selected', true);