jquery - 在选择另一个 select2 下拉列表时重置一个 select2 下拉列表的元素

Question

我有两个 select2 下拉菜单，如下所示。

<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <div class="col-md-2">
                <label>Fruits</label>
            </div>
            <div class="col-md-4">
                <select asp-for="SelectedFruit" asp-items="@Model.FruitList" asp-class="form-control"></select>
            </div>

            <div class="col-md-2">
                <label>Vegetable(s)</label>
            </div>
            <div class="col-md-4">
                <select asp-for="SelectedVegetable" asp-items="@Model.VegetableList" asp-class="form-control"></select>
            </div>
        </div>
    </div>
</div>

基本上，我想在更改另一个下拉列表时从一个下拉列表中删除所选值。这是我在 Jquery 中的代码。

$('#SelectedFruit').on('change', function (e) {
   $('#SelectedVegetable').val('').trigger('change');
});

$('#SelectedVegetable').on('change', function (e) {
    $('#SelectedFruit').val('').trigger('change');
});

但这最终会进入一个连续循环，因为一个更改会触发另一个事件，依此类推。我还有哪些其他选择？

Answer 1

触发部分(trigger('change'))导致问题，因为您以编程方式触发 change 事件，它将触发该元素的更改事件处理程序，因此它重复发生(因为您在两个处理程序中都触发)。

要修复它，仅当值为非空字符串时才会触发。

$('#SelectedFruit').on('change', function (e) {
 if(this.value !== '')
   $('#SelectedVegetable').val('').trigge('change');
});

$('#SelectedVegetable').on('change', function (e) {
 if(this.value !== '')
   $('#SelectedFruit').val('').trigge('change');
});

$('#example1,#example2').select2({
  placeholder: 'Select a month'
});
$('#example1').on('change', function() {
  if (this.value !== '')
    $('#example2').val('').change();
})
$('#example2').on('change', function() {
  if (this.value !== '')
    $('#example1').val('').change();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<select id="example1" style="width: 300px">
  <option value=""></option>
  <option value="JAN">January</option>
  <option value="FEB">February</option>
  <option value="MAR">March</option>
  <option value="APR">April</option>
  <option value="MAY">May</option>
  <option value="JUN">June</option>
  <option value="JUL">July</option>
  <option value="AUG">August</option>
  <option value="SEP">September</option>
  <option value="OCT">October</option>
  <option value="NOV">November</option>
  <option value="DEC">December</option>
</select>
<select id="example2" style="width: 300px">
  <option value=""></option>
  <option value="JAN">January</option>
  <option value="FEB">February</option>
  <option value="MAR">March</option>
  <option value="APR">April</option>
  <option value="MAY">May</option>
  <option value="JUN">June</option>
  <option value="JUL">July</option>
  <option value="AUG">August</option>
  <option value="SEP">September</option>
  <option value="OCT">October</option>
  <option value="NOV">November</option>
  <option value="DEC">December</option>
</select>

<小时/>

或者替代方法是在更新值后重新初始化select2。

$('#SelectedFruit').on('change', function (e) {
   $('#SelectedVegetable').val('').select2('destroy').select2();
});

$('#SelectedVegetable').on('change', function (e) {
    $('#SelectedFruit').val('').select2('destroy').select2();
});

$('#example1,#example2').select2({
  placeholder: 'Select a month'
});
$('#example1').on('change', function() {
  $('#example2').val('').select2('destroy').select2();
})
$('#example2').on('change', function() {
  $('#example1').val('').select2('destroy').select2();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<select id="example1" style="width: 300px">
  <option value=""></option>
  <option value="JAN">January</option>
  <option value="FEB">February</option>
  <option value="MAR">March</option>
  <option value="APR">April</option>
  <option value="MAY">May</option>
  <option value="JUN">June</option>
  <option value="JUL">July</option>
  <option value="AUG">August</option>
  <option value="SEP">September</option>
  <option value="OCT">October</option>
  <option value="NOV">November</option>
  <option value="DEC">December</option>
</select>
<select id="example2" style="width: 300px">
  <option value=""></option>
  <option value="JAN">January</option>
  <option value="FEB">February</option>
  <option value="MAR">March</option>
  <option value="APR">April</option>
  <option value="MAY">May</option>
  <option value="JUN">June</option>
  <option value="JUL">July</option>
  <option value="AUG">August</option>
  <option value="SEP">September</option>
  <option value="OCT">October</option>
  <option value="NOV">November</option>
  <option value="DEC">December</option>
</select>

引用:How to set selected value of jquery select2?