javascript - Select2 Dropdown Multiple select and unselect - Stack Overflow

admin管理员组

文章数量:1391955

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?

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?

• javascript
• jquery
• html
• select
• dropdown

Share Improve this question Follow edited Aug 1, 2018 at 9:44 Nimeshka Srimal 8,98055 gold badges4545 silver badges6060 bronze badges asked Dec 19, 2017 at 10:18 Shine InfosoftShine Infosoft 15522 silver badges1313 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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/c6yrLoow/

Hope it helps :)

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

本文标签： javascriptSelect2 Dropdown Multiple select and unselectStack Overflow