title: How to reset multiple select boxes in a form with jquery?
body: <p>How can I reset multiple select boxes in a form with jquery?</p>
  
  <ul>
  <li>there are multiple select boxes</li>
  <li>they are dynamically generated &amp; we don't know what they will be</li>
  <li>some of the boxes option tags will be marked as selected</li>
  <li>fiddle: <a href="http://jsfiddle.net/Qnq82/" rel="noreferrer">http://jsfiddle.net/Qnq82/</a></li>
  </ul>
  
  <p>I have this so far, it resets everything but the selects.</p>
  
  <pre><code>$('button#reset').click(function(){
      $form = $('button#reset').closest('form');
      $form.find('input:text, input:password, input:file, select, textarea').val('');
      $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
      $form.find('select').selectedIndex = 0;
    });
  </code></pre>
  
  <p><strong>Added some markup:</strong></p>
  
  <pre><code>&lt;form id="form" name="form" method="post" class="form" role="form" action="inventory-search" enctype="multipart/form-data"&gt;
  
  
      &lt;div class="form-group"&gt;
          &lt;label for="grade"&gt;Grade&lt;/label&gt;
          &lt;select name="grade" class="form-control input-sm" onchange="this.form.submit();"&gt;
              &lt;option value=""&gt;Any&lt;/option&gt;
              &lt;option value="opt1"&gt;opt1&lt;/option&gt;
              &lt;option value="opt2" selected="selected"&gt;opt2&lt;/option&gt;
  
          &lt;/select&gt;
      &lt;/div&gt;
  
  
      &lt;!-- there are 6 more select controls --&gt;
  
  
      &lt;div class="form-group"&gt;
          &lt;label&gt;&amp;nbsp;&lt;/label&gt;
          &lt;button type="submit" name="search" id="search" value="search" class="btn button-sm btn-primary"&gt;Search&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;label&gt;&amp;nbsp;&lt;/label&gt;
          &lt;button type="reset" name="reset" id="reset" value="reset" class="btn button-sm btn-primary"&gt;Reset&lt;/button&gt;
      &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>