CODEWITHSUNDEEP
jqueryselectdropdown
agon024
agon024

Reputation: 1007

jQuery match up two different select boxes

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.

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.

Here is and example of the HTML I am working with:

<select class="state1" id="state1" name="state1">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option value="CA">California</option>
  <option value="CO">Colorado</option>
  <option value="CT">Connecticut</option>
</select>

<select id="state2" name="state2" size="0" class="state2">    
  <option value="55" class="has-children">AL</option>
  <option value="25" class="has-children">AK</option>
  <option value="200" class="has-children">AZ</option>
  <option value="123" class="has-children">AR</option>
  <option value="216" class="has-children">CA</option>
  <option value="275" class="has-children">CO</option>
  <option value="340" class="has-children">CT</option>
</select>

I found this code on another post that will work as long as the values are the same: 

$("#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);
});

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".

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.

I hope I explained well enough. I can try to be clearer if need be.

Thanks in advance, Agon

Upvotes: 1

Views: 1812

Answers (2)

Sebastianb
Sebastianb

Reputation: 2060

What I'd do (there's possibly a lot of better solutions) is include a "data-state2=IdOfState2", or something like that, in each corresponding option of the first select.

Then, in Javascript:

$("#state1").change(function() {
    var val2 = $("option:selected",this).data("state2");
    $("#state2").val(val2);
});

Here's a working fiddle

Upvotes: 0

user372495
user372495

Reputation: 710

You want something like this:

$("#state1").change(function() {
  var val = $(this).val();
  $('#state2 option').each(function(){
    var val2 = $(this).html();
    console.log(val2);
    if (val2 == val) {
      $(this).prop('selected', true);
    } else {
      $(this).prop('selected', false);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="state1" id="state1" name="state1">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option value="CA">California</option>
  <option value="CO">Colorado</option>
  <option value="CT">Connecticut</option>
</select>

<select id="state2" name="state2" size="0" class="state2">    
  <option value="55" class="has-children">AL</option>
  <option value="25" class="has-children">AK</option>
  <option value="200" class="has-children">AZ</option>
  <option value="123" class="has-children">AR</option>
  <option value="216" class="has-children">CA</option>
  <option value="275" class="has-children">CO</option>
  <option value="340" class="has-children">CT</option>
</select>

Upvotes: 1

Related Questions