javascript - Select2 Dropdown 多项选择和取消选择

Question

我有一个带有 4 个选项的 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>

select2 被这个 javascript 调用:

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

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

我试过这段代码:

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

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

Answer 1

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

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

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

$('.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/

希望对您有所帮助:)