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

Posted 2023-02-24

【中文标题】在选择另一个 select2 下拉列表时重置一个 select2 下拉列表的元素

【英文标题】：To reset elements of one select2 dropdown on selection of another select2 dropdown

【发布时间】：2019-08-11 12:11:51

【问题描述】：

我有两个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');
);

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

【参考方案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?

【讨论】：

@TheFallenOne：为什么不呢？现在面临什么问题？

【参考方案2】：

我就是这样做的。我不确定这是否是正确的方法，但这对我有用。我基本上是重新加载控件而不是操作值。

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

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

另外，我的想法来自this answer.