Select2下拉菜单多次选择和取消选择

Question

我有一个带有2个选项代码的select2下拉列表：

<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>

这个javascript调用的select2 ：

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

我想实现以下效果：单击所有选项然后删除其他选项，如果选择了其他选项，则从选择中删除所有选项。

我已经试过这段代码：

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

但是更改事件未触发，是否有其他可能跟踪select2下拉列表的更改事件？

Answer 1

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

然后，您可以设置选择元素的值并触发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/

希望能帮助到你 ：）

Answer 2

@Nimeksha给出的答案在@Nimeshka给出的jsfiddle中非常有效，但是在我的代码中，我无法获得下拉列表更改的触发事件，并且在搜索后我从这里找到了解决方案。 代码在这里：

 $(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