选择2下拉列表多个选择和取消选择

Question

我有select24个选项代码的下拉列表是:

<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

@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