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

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