'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

I realize this question is quite old, but I came upon a similar issue and wanted to share my result, as I like it's simplicity:

I created two buttons (all and none) and floated them left and right inside the div containing my select dropdown. The buttons look something like this:

<button style="float:left;" class="btn" id="iAll">All</button>
<button style="float:right;" class="btn" id="iNone">None</button>

Then I added some Jquery to handle the button actions:

$('#iAll').on('click', function(e){
  e.preventDefault();
  $('#iSelect option').prop('selected', true).trigger('chosen:updated');
});

$('#iNone').on('click', function(e){
  e.preventDefault();
  $("#iSelect option:selected").removeAttr("selected").trigger('chosen:updated');
});

Will probably need some cleaning up with regards to layout, but it's quite functional as is and I thought I'd share.

Answer 2

Just straight forward way of clearing selection:

$('select').val('');
$('select').val('').trigger("chosen:updated"); 

Answer 3

You should try this:

$('#drpdwn').empty();
$('#drpdwn').trigger('chosen:updated');

Answer 4

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/

Answer 5

$("#ctrlName option:selected").removeAttr("selected").trigger('liszt:updated'); 

clear all

$("#ctrlName option").attr("selected","selected").trigger('liszt:updated'); 

select all

Answer 6

Try this code it will work 100%

// Deselect All
$('#my_select_box option:selected').removeAttr('selected');
$('#my_select_box').trigger('chosen:updated');

// Select All
$('#my_select_box option').prop('selected', true);  
$('#my_select_box').trigger('chosen:updated');