title: jquery select all options in next multi-select box
body: <p>I have several forms that require the use of a few multi-select boxes.  (list of affiliates, list of sources, list of products, etc...)  Each form could have it's own set of multi-boxes, for whatever my clients need.  </p>
  
  <p>I also created a link that allows the user to "select all" the options in any of the multi-select boxes.  And so far things work great!  But I want to make the jquery a little more smart.</p>
  
  <p>Here's an example of what I've coded:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;div id="allaffs" class="selectAll"&gt;select all&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;
      &lt;select name="affid[]" id="affid" size="15" style="width:230px;height:300" multiple="multiple"&gt;
        &lt;option value="0" selected="selected"&gt;--no affiliate assigned--&lt;/option&gt;
          &lt;? while($r = mysql_fetch_array($somequerystuff)){  ?&gt;
        &lt;option value="&lt;?php echo $r['affid']; ?&gt;" selected="selected"&gt;&lt;?php echo $r['affname']; ?&gt;&lt;/option&gt;
        &lt;? } ?&gt;
      &lt;/select&gt;   
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;div id="allsources" class="selectAll"&gt;select all&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;
      &lt;select name="sourceid[]" id="sourceid" size="15" style="width:230px;height:300" multiple="multiple"&gt;
        &lt;option value="0" selected="selected"&gt;--no source assigned--&lt;/option&gt;
          &lt;? while($r = mysql_fetch_array($somequerystuff)){  ?&gt;
        &lt;option value="&lt;?php echo $r['sourceid']; ?&gt;" selected="selected"&gt;&lt;?php echo $r['sourcename']; ?&gt;&lt;/option&gt;
        &lt;? } ?&gt;
      &lt;/select&gt;   
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;script language="javascript" type="text/javascript"&gt;
  $(document).ready(function(){
  
    $(".selectAll").click(function(){
      var theID = $(this).attr('id');
      if(theID=='allaffs'){ $("#affid option").attr("selected","selected"); }
      if(theID=='allsources'){ $("#sourceid option").attr("selected","selected"); }
    });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>And this totally works.  But I tend to add more multi-boxes for other filtering reasons.
  I want to make the jquery detect the click event for the .selectAll class, but make it smart enough to select all options in the next available multi-box. This way I wouldn't have to create a new line in the jquery code for the new box.</p>