在选择另一个select2下拉框时重置一个select2下拉框的元素。

7 浏览
0 Comments

在选择另一个select2下拉框时重置一个select2下拉框的元素。

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

基本上，我想在一个下拉菜单改变时从另一个下拉菜单中移除所选的值。因此，这是我的Jquery代码。

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

但是这最终会进入一个连续的循环，因为一个改变会触发另一个事件，依此类推。我还有其他选项吗？

0

2 答案

0 Comments

问题的出现的原因是当选择一个select2下拉菜单的选项时，需要重置另一个select2下拉菜单的选项。

解决方法是通过重新加载控件而不是操作值来实现。具体的代码为：

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

以上代码的思路是，当`SelectedFruit`的选项改变时，先销毁`SelectedVegetable`的select2控件，然后将其值重置为空，并重新加载select2控件。同样地，当`SelectedVegetable`的选项改变时，先销毁`SelectedFruit`的select2控件，然后将其值重置为空，并重新加载select2控件。

这个解决方法的灵感来源于这个答案。

0
0 Comments

问题的出现原因是在程序中通过trigger('change')触发了change事件处理程序，导致事件处理程序重复执行。解决方法是只在值为非空字符串时触发事件。

第一种解决方法是在选中一个下拉菜单的选项后重新初始化select2。具体代码如下：

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

第二种解决方法是在选中一个下拉菜单的选项后，只触发一次change事件。具体代码如下：

$('#example1').on('change', function() {
  if (this.value !== '')
    $('#example2').val('').change();
})
$('#example2').on('change', function() {
  if (this.value !== '')
    $('#example1').val('').change();
})

以上两种解决方法都需要引入jQuery和Select2的库，并使用相应的HTML代码构建下拉菜单。

参考文献：[How to set selected value of jquery select2?](https://stackoverflow.com/questions/25187926)

0