Сброс элементов одного выпадающего списка 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>

Справка: Как установить выбранное значение в jquery select2?

Answer 2

Вот как я это делаю. Я не уверен, что это правильный путь, но это то, что работает для меня. Я в основном перезагружаю элемент управления, а не манипулирую значениями.

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

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

Также, чтобы отдать должное, где это должно быть, я получил идею от этого ответа.