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

LVL 16
hankknightAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.