Question

我的应用中有两个<select>但在不同的屏幕上。它们具有相同的change处理程序并具有相同的值。当一个人改变另一个时，应该相应地改变它的值。

问题是当一个人被改变并且我试图改变另一个时，它将在第一个事件上触发change事件，依此递归。

那么如何更改选择，但不会触发更改事件？

Answer 1

当我尝试更改另一个时，它会在第一个上触发change事件，依此递归。

真的？你必须做错事，通常更改值不会触发事件。只需使用

var bothselects = $("#first-select, #second-select");
bothselects.change(function(e) {
    bothselects.val(this.value); // "this" is the changed one

    // do whatever else you need to do
});

Answer 2

如果要按索引匹配选项，而不是值，请按以下步骤进行匹配：

HTML：

<select class="synch">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

<select class="synch">
  <option value="AA">AA</option>
  <option value="BB">BB</option>
  <option value="CC">CC</option>
</select>

javascript：

var $synch = $(".synch").on('change', function() {
  $synch.not(this).get(0).selectedIndex = this.selectedIndex;
});

<强> DEMO

我看不出递归应该是个问题。即使以编程方式更改<select>确实触发了'change'事件（它没有），然后在第一次同步之后，两个索引（或值）将匹配，不会发生进一步的更改，也不需要发生。因此没有变化，没有变化事件，也没有递归。

Answer 3

试试这个：

var $selects=$('#select_1,#select_2').change(function(){
    $selects.not(this).val( $(this).val() );
})

DEMO http://jsfiddle.net/mGYGK/

Answer 4

$("#select1").change(function(){
  $("#select2").val($("#select1").val())
});
$("#select2").change(function(){
  $("#select1").val($("#select2").val())
});

您可以观看此功能的实时演示here

Answer 5

在更改处理程序中，仅在其值不同时更新另一个选择，如果值匹配则不执行任何操作。这打破了递归。

保持两个<select>同步</select>

5 个答案: