在选择另一个 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?

Answer 2

我就是这样做的。我不确定这是否是正确的做法，但这对 me.I 有效，我基本上是重新加载控件而不是操纵值。

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

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

另外，为了表扬，我的想法来自 this answer.

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

To reset elements of one select2 dropdown on selection of another select2 dropdown

jquery

jquery-select2