按钮清除所有选择字段

Question

 <form method="post" action="asdasd" class="custom" id="search">
 <select name="sel1" id="sel1">
   <option value="all">all</option>
   <option value="val1">val1</option>
   <option value="val2" selected="selected">val2</option>
 </select>
 <select name="sel2" id="sel2">
   <option value="all">all</option>
   <option value="val3">val3</option>
   <option value="val4" selected="selected">val4</option>
 </select>
 </form>

I want to select the first field of all the Select (so set the value "all" to all the Select) clicking a button

Answer 1

Your form should have a reset button

<form method="post" action="asdasd" class="custom" id="search">
 <select name="sel1" id="sel1">
   <option value="all">all</option>
   <option value="val1">val1</option>
   <option value="val2" selected="selected">val2</option>
 </select>
 <select name="sel2" id="sel2">
   <option value="all">all</option>
   <option value="val3">val3</option>
   <option value="val4" selected="selected">val4</option>
 </select>
 <input type="button" name="Reset" />
 </form>

After adding a reset button input element to your form below code should reset all select fields.

jQuery( "input[name=Reset]" ).click( function(){ //jQuery click event
jQuery( "select" ).each(function() {     //for each select type
    $(this).val( "all" );
});

});

Answer 2

You have to add attribute selected to the first option of all select box.

$("select option:first").attr('selected','selected');

See my fiddle

Hope it helps.

Answer 3

You don't need to use jquery. This can be done by JavaScript

  document.getElementById("sel1").selectedIndex = 0;

Here is my JSFiddler demo for complete code.

This is jQuery way to achieve above

  $("select").val("0");    

Or to be more specific

  $("#sel1 , #sel2").val("0");