'select all' and 'remove all' with chosen.js

Question

For the select menu plugin chosen.js, is there an established way to add \'select all items in list\' or \'remove all items in list\' feature to a multiple select input? In

Answer 1

It should be pretty straight forward, just do it the "normal" way first:

$('.my-select-all').click(function(){
    $('#my_select option').prop('selected', true); // Selects all options
});

Then trigger the liszt:updated event to update the chosen widget, so the whole thing would look something like this:

---

Update: For those who don't scroll down and check the other answers, the event is called chosen:updated as of a version released in August 2013. Consult the documentation if in doubt.

---

  1
  2
  3

Select all
Deselect all

$('select').chosen();
$('.select').click(function(){
    $('option').prop('selected', true);
    $('select').trigger('liszt:updated');
});
$('.deselect').click(function(){
    $('option').prop('selected', false);
    $('select').trigger('liszt:updated');
});​

Working demo (js code is at the bottom): http://jsfiddle.net/C7LnL/1/

Tighter version: http://jsfiddle.net/C7LnL/2/

Even tighter version: http://jsfiddle.net/C7LnL/3/