title: jQuery match up two different select boxes
body: <p>I have taken on a Drupal site that is using a hierarchical select box in order for a customer to select their state and then the other select box will populate with all the counties belonging to that state.  </p>
  
  <p>What I am trying to get this to do is match up different values in two seperate select boxes and change the second according to what was selected in the first box.</p>
  
  <p>Here is and example of the HTML I am working with:</p>
  
  <pre><code>&lt;select class="state1" id="state1" name="state1"&gt;
    &lt;option value="AL"&gt;Alabama&lt;/option&gt;
    &lt;option value="AK"&gt;Alaska&lt;/option&gt;
    &lt;option value="AZ"&gt;Arizona&lt;/option&gt;
    &lt;option value="AR"&gt;Arkansas&lt;/option&gt;
    &lt;option value="CA"&gt;California&lt;/option&gt;
    &lt;option value="CO"&gt;Colorado&lt;/option&gt;
    &lt;option value="CT"&gt;Connecticut&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="state2" name="state2" size="0" class="state2"&gt;    
    &lt;option value="55" class="has-children"&gt;AL&lt;/option&gt;
    &lt;option value="25" class="has-children"&gt;AK&lt;/option&gt;
    &lt;option value="200" class="has-children"&gt;AZ&lt;/option&gt;
    &lt;option value="123" class="has-children"&gt;AR&lt;/option&gt;
    &lt;option value="216" class="has-children"&gt;CA&lt;/option&gt;
    &lt;option value="275" class="has-children"&gt;CO&lt;/option&gt;
    &lt;option value="340" class="has-children"&gt;CT&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I found this code on another post that will work as long as the values are the same: </p>
  
  <pre><code>$("#select1").change(function() {
    if ($(this).data('options') == undefined) {
      /*Taking an array of all options-2 and kind of embedding it on the select1*/
      $(this).data('options', $('#select2 option').clone());
    }
    var id = $(this).val();
    var options = $(this).data('options').filter('[value=' + id + ']');
    $('#select2').html(options);
  });
  </code></pre>
  
  <p>I need to link each value to another in some way so that when they select say Alabama with a value of "AL" in the first dropdown it will change the second dropdown to "AB" since the first value "AL" is linked to the second value "55". </p>
  
  <p>So again the question is how can I link two different values together and then change the second select box to match what was selected in the first select box.</p>
  
  <p>I hope I explained well enough. I can try to be clearer if need be.</p>
  
  <p>Thanks in advance,
  Agon</p>