Question

我已经使用了一个使用分层选择框的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);
});

我需要以某种方式将每个值链接到另一个值，以便当他们选择说Alabama的值为＆＃34; AL＆＃34;在第一次下拉列表中，它会将第二次下拉菜单更改为＆＃34; AB＆＃34;因为第一个值＆＃34; AL＆＃34;与第二个值相关联＆＃34; 55＆＃34;。

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

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

提前致谢，阿贡

Answer 1

你想要这样的东西：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

然后，在Javascript中：

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

这是一个有效的fiddle

jQuery匹配两个不同的选择框

2 个答案: