jQuery 匹配两个不同的 select 盒子

Question

我访问了一个使用分层 select 框的 Drupal 站点，以便客户 select 他们的状态，然后另一个 select 框将填充所有属于该州的县。

我想做的是在两个单独的 select 框中匹配不同的值，并根据第一个框中 select 编辑的内容更改第二个。

这是我正在使用的 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>

我在另一个 post 上找到了这段代码，只要值相同就可以使用：

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

我需要以某种方式将每个值 link 转换为另一个值，这样当他们 select 在第一个下拉列表中说阿拉巴马州的值为 "AL" 时，它会更改第二个下拉列表到 "AB"，因为第一个值 "AL" 被 link 编辑为第二个值“55”。

所以问题又是如何 link 两个不同的值放在一起，然后更改第二个 select 框以匹配第一个 select 中编辑的内容 select框。

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

提前致谢，激动

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

Answer 2

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

然后，在Javascript：

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

这是一个有效的 fiddle

jQuery 匹配两个不同的 select 盒子

jQuery match up two different select boxes

jquery

select

dropdown