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