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

Answer 2

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');

Answer 3

I missed the similar feature. This adds the two links All and None (texts customizable through options uncheck_all_text and select_all_text) on the top of the popup list. You may need to edit this if you use grouping.

$("select").on("chosen:showing_dropdown", function(evnt, params) {
    var chosen = params.chosen,
        $dropdown = $(chosen.dropdown),
        $field = $(chosen.form_field);
    if( !chosen.__customButtonsInitilized ) {
        chosen.__customButtonsInitilized = true;
        var contained = function( el ) {
            var container = document.createElement("div");
            container.appendChild(el);
            return container;
        }
        var width = $dropdown.width();
        var opts = chosen.options || {},
            showBtnsTresshold = opts.disable_select_all_none_buttons_tresshold || 0;
            optionsCount = $field.children().length,
            selectAllText = opts.select_all_text || 'All',
            selectNoneText = opts.uncheck_all_text || 'None';
        if( chosen.is_multiple && optionsCount >= showBtnsTresshold ) {
            var selectAllEl = document.createElement("a"),
                selectAllElContainer = contained(selectAllEl),
                selectNoneEl = document.createElement("a"),
                selectNoneElContainer = contained(selectNoneEl);
            selectAllEl.appendChild( document.createTextNode( selectAllText ) );
            selectNoneEl.appendChild( document.createTextNode( selectNoneText ) );
            $dropdown.prepend("<div class='ui-chosen-spcialbuttons-foot' style='clear:both;border-bottom: 1px solid black;'></div>");
            $dropdown.prepend(selectNoneElContainer);
            $dropdown.prepend(selectAllElContainer);
            var $selectAllEl = $(selectAllEl),
                $selectAllElContainer = $(selectAllElContainer),
                $selectNoneEl = $(selectNoneEl),
                $selectNoneElContainer = $(selectNoneElContainer);
            var reservedSpacePerComp = (width - 25) / 2;
            $selectNoneElContainer.addClass("ui-chosen-selectNoneBtnContainer")
                .css("float", "right").css("padding", "5px 8px 5px 0px")
                .css("max-width", reservedSpacePerComp+"px")
                .css("max-height", "15px").css("overflow", "hidden");
            $selectAllElContainer.addClass("ui-chosen-selectAllBtnContainer")
                .css("float", "left").css("padding", "5px 5px 5px 7px")
                .css("max-width", reservedSpacePerComp+"px")
                .css("max-height", "15px").css("overflow", "hidden");
            $selectAllEl.on("click", function(e) {
                e.preventDefault();
                $field.children().prop('selected', true);
                $field.trigger('chosen:updated');
                return false;
            });
            $selectNoneEl.on("click", function(e) {
                e.preventDefault();
                $field.children().prop('selected', false);
                $field.trigger('chosen:updated');
                return false;
            });
        }
    }
});

I am also using a CSS to limit the height of the selected choises in case there are say tens of them:

    .chosen-choices {
        max-height: 150px;
    }

Answer 4

Just straight forward way of clearing selection:

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

Answer 5

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 6

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

clear all

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

select all

Answer 7

You should try this:

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