Using jQuery to reset select box

Question

I'm having difficulty using jQuery to reset the 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 to select in the "Default" field. I tried various methods, including attr-> selectedIndex, but they all have the same affect, it briefly changes the default value (as you can see, if you look at the form when the "Warning" window appears, but as soon as the warning window closes or the warning line is deleted, it returns to the currently selected parameter 2.

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

For convenience, I added jsfiddle: http://jsfiddle.net/ux2f2/1/

I hope I have included everything since this is my first post, but I am a long reader :) Love this site!

Answer 1

The main problem is that the reset button resets the form after clicking on it and sees a warning. You need to cancel the default event. However, you can also try vanilla JS:

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

Updated script

Answer 2

You do not need 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); }); 

value "-1" means "reset"

Answer 3

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

The quickest solution is to change

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

to

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

or just make a binding binding or div to be a trigger for reset instead of input

This way you do not need to make any changes to jQuery

Answer 4

You should use something like:

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

Working script: http://jsfiddle.net/gsN9d/

As an alternative (the newer prop syntax) use:

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