jQuery匹配两个不同的选择框答案

【问题标题】：jQuery match up two different select boxesjQuery匹配两个不同的选择框
【发布时间】：2016-03-09 18:42:56
【问题描述】：

我已经使用了一个 Drupal 站点，该站点使用分层选择框让客户选择他们的州，然后另一个选择框将填充属于该州的所有县。

我要做的是匹配两个单独选择框中的不同值，并根据第一个框中选择的内容更改第二个。

这是我正在使用的 HTML 示例：

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

我在另一篇文章中发现了这段代码，只要值相同，它就可以工作：

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

我需要以某种方式将每个值链接到另一个值，这样当他们在第一个下拉列表中选择值为“AL”的阿拉巴马州时，它会将第二个下拉列表更改为“AB”，因为第一个值“AL”是链接到第二个值“55”。

所以问题是如何将两个不同的值链接在一起，然后更改第二个选择框以匹配第一个选择框中选择的内容。

我希望我解释得足够好。如果需要，我可以尝试更清楚。

提前致谢，阿贡

【问题讨论】：

标签： jquery select dropdown

【解决方案1】：

你想要这样的东西：

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

【讨论】：

【解决方案2】：

我要做的（可能有很多更好的解决方案）是在第一个选择的每个相应选项中包含一个“data-state2=IdOfState2”或类似的东西。

然后，在 Javascript 中：

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

这是一个有效的fiddle

【讨论】：