从另一个Select2中更改值将创建递归。

Question

我有两个Select2元素。如果另一个被更改，我想要更改其中一个的值。它创建递归。

​

$('.select2').select2().on('change.select2', function(e) {
    if (e.target.id == 'select-1') {
        $('#select-2').val('all').trigger('change')
    } else if (e.target.id == 'select-2') {
        $('#select-1').val('all').trigger('change')
    }
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<select id="select-1" class="select2">
  <option value="all">All</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>

</select>

<br><br>
<select id="select-2" class="select2">
  <option value="all">All</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>

</select>

​

我更改了代码，使其不触发对其他元素的更改。但它还是要进行递归。

​

let allowChange = true;
$('.select2').select2().on('change.select2', function(e) {
    if (e.target.id == 'select-1') {
        if (allowChange) {
            $('#select-2').val('all').trigger('change')
            allowChange = false;
        } else {
            allowChange = true;
        }
    } else if (e.target.id == 'select-2') {
        if (allowChange) {
            $('#select-1').val('all').trigger('change')
            allowChange = false;
        } else {
            allowChange = true;
        }
    }
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<select id="select-1" class="select2">
  <option value="all">All</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>

</select>

<br><br>
<select id="select-2" class="select2">
  <option value="all">All</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>

</select>

​

有没有办法解决这个问题，实现我想要达到的目标？

Answer 1

如何使用.on('input'来检测当前的select2更改？

​

$('.select2').select2().on('input', function(e) {
  console.clear();
  console.log('#' + e.target.id + ' value: ' + e.target.value);
  if (e.target.id == 'select-1') {
    $('#select-2').val('all').trigger('change')
  } else if (e.target.id == 'select-2') {
    $('#select-1').val('all').trigger('change')
  }
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<select id="select-1" class="select2">
  <option value="all">All</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>

</select>

<br><br>
<select id="select-2" class="select2">
  <option value="all">All</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>

</select>

​

Answer 2

​

let allowChange = true;
$('.select2').select2().on('input', function(e) {
      if (e.target.id == 'select-1') {
        if (allowChange) {
            $('#select-2').val('all').trigger('change')
            allowChange = false;
        } else {
            allowChange = true;
        }
    } else if (e.target.id == 'select-2') {
        if (allowChange) {
            $('#select-1').val('all').trigger('change')
            allowChange = false;
        } else {
            allowChange = true;
        }
    }
    })

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<select id="select-1" class="select2">
  <option value="all">All</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>

</select>

<br><br>
<select id="select-2" class="select2">
  <option value="all">All</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>

</select>

​

首先，当您使用$('.select2').select2().on('change.select2'，_(_代码中发生的事情是，当您调用下拉列表更改时，它调用处理程序，而在处理程序中，您是以编程方式调用change事件，因此处理程序被递归地调用为。有两种方法可以解决这个问题。首先，您需要将事件绑定与下拉列表处理程序分离，或者只需更改事件类型，使用类选择器就可以绑定事件类型。我希望这能帮助你理解这个问题。