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