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 the main branch or perhaps in one of the forks? Or has someone done this before has some tips?

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.

---

<select multiple>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<button class="select">Select all</button>
<button class="deselect">Deselect all</button>

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