Select2 Dropdown Multiple select and unselect

Question

I have a select2 dropdown with 4 options code is:

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

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

Nimeshka Srimal · Answer 1 · 2017-12-21T04:38:25.590

4

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

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

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.

https://jsfiddle.net/c6yrLoow/

Hope it helps :)

edited Dec 21 '17 at 04:38

answered Dec 19 '17 at 11:09

Nimeshka Srimal

8,012
5
42
57

this function doesn't get called – Shine Infosoft Dec 20 '17 at 04:21
what do you get? any error? and what's the version of select2 you use? – Nimeshka Srimal Dec 20 '17 at 04:30
no error just cant get called the function or cant get the event called and using select2 4.0.3 – Shine Infosoft Dec 21 '17 at 04:20
You mean the change event is not triggered? – Nimeshka Srimal Dec 21 '17 at 04:21
your jsfiddle is perfectly working .. thank you so much – Shine Infosoft Dec 21 '17 at 07:03
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/161684/discussion-between-shine-infosoft-and-nimeshka-srimal). – Shine Infosoft Dec 21 '17 at 07:41

score 1 · Accepted Answer · edited Dec 22 '17 at 10:33

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 :

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

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

thanks again @Nimeshka

Select2 Dropdown Multiple select and unselect

2 Answers2