title: Synchronize 2 Select Boxes
body: <p>I have two select boxes:</p>
  
  <pre><code>&lt;select name="county" id="countyselect"&gt;
   &lt;option value="Dixie"&gt;Dixie&lt;/option&gt;
   &lt;option value="Hernando"&gt;Hernando&lt;/option&gt;
   &lt;option value="Holmes"&gt;Holmes&lt;/option&gt;
   &lt;option value="Jackson"&gt;Jackson&lt;/option&gt;
   &lt;option value="Liberty"&gt;Liberty&lt;/option&gt;
   &lt;option value="Putnam"&gt;Putnam&lt;/option&gt;
  &lt;/select&gt;
  &lt;select name="site" id="siteselect"&gt;
   &lt;option value="Florahome"&gt;Florahome&lt;/option&gt;
   &lt;option value="Green Swamp"&gt;Green Swamp&lt;/option&gt;
   &lt;option value="NE Jackson County"&gt;NE Jackson County&lt;/option&gt;
   &lt;option value="N Holmes County"&gt;N Holmes County&lt;/option&gt;
   &lt;option value="S Liberty County"&gt;S Liberty County&lt;/option&gt;
   &lt;option value="Suwannee"&gt;Suwannee&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>When one box is changed, the other needs to change to the corresponding index (i.e. if Dixie is selected in "county", Florahome should be selected in "site"). My attempt using jQuery is below but does not seem to work.</p>
  
  <pre><code>$('select#countyselect').change(function() {
      var countySelector = $('select#countyselect').attr("selectedIndex"); 
      $('select#siteselect').attr('selectedIndex', countySelector);
  });
  $('select#siteselect').change(function() {
      var siteSelector = $('select#siteselect').attr("selectedIndex");
      $('select#countyselect').attr('selectedIndex', siteSelector);
  });
  </code></pre>
  
  <p>Any ideas?</p>