Select2 Dropdown 多选和取消选择答案

【问题标题】：Select2 Dropdown Multiple select and unselectSelect2 Dropdown 多选和取消选择
【发布时间】：2018-06-01 18:06:38
【问题描述】：

我有一个select2 下拉菜单，其中包含 4 个选项代码是：

<select id="ddlInqOn" class="InqSelect2 form-control">
  <option value="1">--All--</option>
  <option value="2">Today Date</option>
  <option value="3">Past Date</option>
  <option value="4">Feature Date</option>
</select>

select2被这个javascript调用：

$('.InqSelect2').select2({
  dropdownAutoWidth: 'true',
  multiple: true
});

我想实现当我单击所有选项然后删除其他选项时，如果选择了其他选项然后从选择中删除所有选项。

我试过这段代码：

$('body').on('change', '#ddlInqOn', function() {
  debugger;
  //
});

但是没有触发更改事件，所以还有其他可能跟踪 select2 下拉列表的更改事件吗？

【问题讨论】：

标签： javascript jquery html select dropdown

【解决方案1】：

Select2 使用 jQuery 事件系统。因此，您可以使用 JQuery on 方法附加到 select2 事件。

然后可以设置select元素的值，触发change事件更新选择框。

您可以按照以下方式执行您所要求的操作。

$('.InqSelect2').on('select2:select', function (e) {

    if (e.params.data.id == 1){
        $(this).val(1).trigger('change');
    }else{
        values = $(this).val();
        var index = values.indexOf('1');

        if (index > -1) {
            values.splice(index, 1);
            $(this).val(values).trigger('change');
        }
    }
});

请注意，我使用 '1' 作为 --All-- 选项的值。如果您不清楚，请随时问我。

https://jsfiddle.net/c6yrLoow/

希望对你有帮助:)

【讨论】：

这个函数没有被调用
你得到了什么？有什么错误吗？以及您使用的 select2 版本是什么？
没有错误只是无法调用函数或无法调用事件并使用 select2 4.0.3
你的意思是没有触发change事件？
您的 jsfiddle 运行良好.. 非常感谢

【解决方案2】：

@Nimeksha 给出的答案在 @Nimeshka 给出的 jsfiddle 中完美运行，但在我的代码中，我无法在下拉列表中获得触发事件，在搜索后我找到了来自 here 的解决方案。代码在这里：

 $(document).on('change', '.InqSelect2', function () {
        debugger;
        if (e.params.data.id == 1) {
            $(this).val(1).trigger('change');
        } else {
            values = $(this).val();
            var index = values.indexOf('1');

            if (index > -1) {
                values.splice(index, 1);
                $(this).val(values).trigger('change');
            }
        }
    });

我也试过了：

   $('body').on('change', '.InqSelect2', function () {
        debugger;
        if (e.params.data.id == 1) {
            $(this).val(1).trigger('change');
        } else {
            values = $(this).val();
            var index = values.indexOf('1');

            if (index > -1) {
                values.splice(index, 1);
                $(this).val(values).trigger('change');
            }
        }
    });

但它不起作用。同样通过 id #ddlInqOn 不起作用。

为什么上面的代码与$(document).on('change', '.InqSelect2', function () {}); 一起工作我不知道但它对我有用。

再次感谢@Nimeshka

【讨论】：