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?

Answer 1

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

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

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