选择2下拉多选择和取消选择

I have a select2 dropdown with 4 options code is:

我有一个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 called by this javascript:

这个javascript调用的select2:

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

I want to achieve like when I click all option then remove other options and if other option is selected then remove all option from selection.

当我点击所有选项，然后移除其他选项，如果选择了其他选项，然后从选择中移除所有选项，我希望实现。

I have tried this code:

我试过这段代码:

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

but the change event is not triggred so any other possibility to track change event of select2 dropdown?

但是更改事件不是triggred，那么还有其他可能跟踪select2下拉的更改事件吗?

2 个解决方案

#1

Select2 uses the jQuery event system. So you can attach to the select2 events using the JQuery on method.

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

Then you can set the value of the select element and trigger the change event to update the select box.

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

You can do what you have asked in following way.

你可以按照下面的方法去做。

$('.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');
        }
    }
});

Note that I have used '1' as the value of --All-- option. Feel free to ask me anything if it's not clear to you.

注意，我使用了“1”作为“All”选项的值。如果你不清楚的话，尽管问我。

https://jsfiddle.net/c6yrLoow/

Hope it helps :)

希望它能帮助:)

#2

Answer given by @Nimeksha works perfectly in jsfiddle given by @ Nimeshka but in my code i cant get trigger event of change in dropdown and after searching i found solution from here. the code is here :

@ nimeksha给出的答案在jsfiddle是@ Nimeshka提供的，但是在我的代码中，我不能在下拉菜单中得到更改的触发事件，在搜索之后，我从这里找到了解决方案。代码在这里:

 $(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');
            }
        }
    });

i have also tried :

我也尝试过:

   $('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');
            }
        }
    });

but it doesn't work. also by id #ddlInqOn does not work.

但它不工作。id #ddlInqOn也不起作用。

why above code worked with $(document).on('change', '.InqSelect2', function () {}); worked i dont know but it works for me.

为什么上面的代码使用$(文档)。(“变化”、“。InqSelect2’,function(){ });工作，我不知道，但它对我有效。

thanks again @Nimeshka

再次感谢@Nimeshka

#1