• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 370
  • Last Modified:

jQuery: Reset all selects but not inputs

Using jQuery, how can I reset all <select> values but not all <input> values?

In this example, all <select> values should be set to "xyz" when the button is clicked:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

 $('input').val('123');
 $('select').val('0');

 $('#restAllSelect').click(function() {
  $('select').each(function() {
   $(this).val($(this).find('option:eq(2)').val());
  });
 });

});

</script>
</head>
<body>
 <div>
  <input type="text" value="abc" />
  <select>
   <option value="0">0</option>
   <option value="XYZ" selected="selected">XYZ</option>
   <option value="A">A</option>
   <option value="B">B</option>
   <option value="D">D</option>
   <option value="E">E</option>
  </select>
  <select>
   <option value="0">0</option>
   <option value="abc">abc</option>
   <option value="bbb">bbb</option>
   <option value="XYZ" selected="selected">XYZ</option>
  </select>
  <select>
   <option value="0">0</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="XYZ" selected="selected">XYZ</option>
  </select>
  <button id="restAllSelect">Reset selects but not inputs</button>
 </div>
</body>
</html>

Open in new window

0
hankknight
Asked:
hankknight
  • 2
1 Solution
 
Rainer JeschorCommented:
Hi,
to set all selects to the value "XYZ" just use this:
 $('#restAllSelect').click(function() {
  $('select').each(function() {
   $(this).val('XYZ');
  });
 });

Open in new window

See:
http://jsfiddle.net/EE_RainerJ/3avYq/

HTH
Rainer
0
 
leakim971PluritechnicianCommented:
test page : http://jsfiddle.net/FjYYy/

$(document).ready(function() {

 $('input').val('123');
 $('select').val('0');

 $('#restAllSelect').click(function() {
    $('select option[value="XYZ"]').prop('selected', true);
 });

});

Open in new window

0
 
hankknightAuthor Commented:
Thank you both.  I should have specified that the point of this question is to RESET the value.  The actual values will not be XYZ.  They could be anything.  I want to reset the select elements to the value where the option has the attribute selected="selected".
0
 
leakim971PluritechnicianCommented:
check this : http://jsfiddle.net/FjYYy/4/
$(document).ready(function() {

 $('input').val('123');
 $('select').val('0');

 $('#restAllSelect').click(function() {
     $('select option').each(function() {
         if($(this).prop('defaultSelected')==true) $(this).prop('selected',true);
     });
 });

});

Open in new window

0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now