Question

I’m using Select2, a great plugin.

HTML:

<select id="fruits" multiple="true">
  <option value=''>All
  <option value='Apple'>Apple
  <option value='Pear'>Pear
  ...

JavaScript:

$('#fruits').select2();

When I select the “All” option, I need to unselect all previously selected options and have only the “All” option selected.

I’ve tried

onChange="$('#fruits').select2('val', ['All']);"

as well as

onChange="$('#fruits').select2('data', ['All']);"

but it does not seem to work for me.

Any clues?

Answer 1

I added this fiddle with my code, try this…

fiddle here

It is based on click event.

$(function() {
    $('#fruits').click(function(e) {
        var selected = $(e.target).val();
        if(selected=='all'){
           $('#fruits > option').prop("selected",false);
           $(e.target).prop("selected",true);
        };
    }); 
});