Using JavaScript, how can I reset all the select's in my form so that the first option for each is selected?

Question

Hi,

I have a form containing only select fields, a submit button and a reset button.

<form id="search_form">

<select id="country">
  <option value="-1">Select Country</option>
  <option value="22">USA</option>
  <option value="23">Germany</option>
  ...
</select>

<select id="regions">
  <option value="-1">Select Region</option>
  ...
</select>

<input type="reset" value="Reset />

</form>

Each of the select fields has a default option with a value of "-1".

When a user clicks on the reset button, I want all the selects to show the option with this "-1" value as being selected.

What is the best way to do this using JQuery?

Answer 1

You can just make a single .val() call, like this:

$("#search_form select").val("-1");

Or the entire handler:

$("#search_form input:reset").click(function(e) {
  $(this).closest("form").find("select").val("-1");
  e.preventDefault();
});​

You can give it a try here, though if you're just using this to default the values instead of resetting them, I'd use a button instead of a type="reset".