Add optional Select All / Deselect All to the UI for multi-select lists

[ArtemGoutsoul]

Option allow_deselect_all:true:

• If more than 1 item is selected show a little cross in the bottom right corner to deselect all

Option allow_select_all:"Select All":

• If there are more than 1 options - show one extra option (colored differently) saying "Select All" - this option should add all currently filtered options to the selection

[indiejames]

+1

[halcyonandon]

Too bad this sat around for 5 months, is this feature still being considered, on the roadmap, already implemented or dead?

[cschroed]

+1

[ratamaa]

+1

I put an answer concerning this request on StackOverflow thread: http://stackoverflow.com/questions/11172269/select-all-and-remove-all-with-chosen-js#18785302 if it is of any help (of course should be a cleaner solution and work with grouping and all)

[th3sly]

+1

[budlight]

+1

[jordan1210j]

I ended up just doing something on my own. Seems to work out okay. I am 100% sure there is a better way to do this. I would rather have it built in though. Just add the class 'chosen-select-all' to your chosen select.

// Add the Select All and Deselect all options to the chosen multiselect control
$(".chosen-select.chosen-select-all").each(function(){
    var parentSelect = $(this);

    //check to see if this was already added.  
    var selectAllOption = parentSelect.find("option[value='chosen-select-all-option']");
    if(selectAllOption == undefined || selectAllOption.length == 0){
        //Add the options as default first and last for Select and Deselect respectively.
        parentSelect.prepend("<option value='chosen-select-all-option' id='chosen-select-all-option'>-- Select All --</option>");
        parentSelect.append("<option value='chosen-select-none-option' id='chosen-select-none-option'>-- Deselect All --</option>");

        //When it chages loop through the options list to see which were selected.
        parentSelect.change(function() {
            $(this).find("option:selected").each(function(){
                var value = $(this).attr("value");
                  switch (value){
                    //If one of the options selected was the 'Select All' option, remove the Select All and Deselect All options, set all other options to selected, add the master Select All and Deselect All back after the fact. Update Chosen
                    case "chosen-select-all-option":
                        parentSelect.find("option[value='chosen-select-all-option']").remove();
                        parentSelect.find("option[value='chosen-select-none-option']").remove();
                        parentSelect.find("option").prop("selected","selected");
                        parentSelect.prepend("<option value='chosen-select-all-option' id='chosen-select-all-option'>-- Select All --</option>");
                        parentSelect.append("<option value='chosen-select-none-option' id='chosen-select-none-option'>-- Deselect All --</option>");
                        parentSelect.trigger("chosen:updated");
                      break;
                    case "chosen-select-none-option":
                        parentSelect.find("option[value='chosen-select-all-option']").remove();
                        parentSelect.find("option[value='chosen-select-none-option']").remove();
                        parentSelect.find("option").prop("selected",false);
                        parentSelect.prepend("<option value='chosen-select-all-option' id='chosen-select-all-option'>-- Select All --</option>");
                        parentSelect.append("<option value='chosen-select-none-option' id='chosen-select-none-option'>-- Deselect All --</option>");
                        parentSelect.trigger("chosen:updated");
                        break;
                  }
            });
          }).trigger( "change" );

        //Update chosen to include the Select all and Deselect All options
        parentSelect.trigger("chosen:updated");
    }
});

[budlight]

I guess adding it into the actual list like you did there probably solves a lot of UI issues. I think later versions of jQuery would use

'selected', true

Not sure if "selected" will eventually quit working. You could also add a class to the ALL/NONE option choices and use a not() selector to clean this code up quite a bit, by not forcing the adding and removal of the option items.

[jordan1210j]

I'm on an older version of jquery, but yes! Also good call on the class thing. I'm very dumb for not thinking of that. Very dumb indeed. Stupid legacy apps are making me sloppy. I just wanted to post a solution to the interwebs to help.

[budlight]

Well i think you solved what would keep this from getting merged in by solving how to display the ui for this.

Also .val('') might be even more compatible than .prop("selected",false) I know it works for me.

[wizonesolutions]

+1

[cspwizard]

+1 That would be really helpful feature

[raphaklaus]

+1, but you can first select the option, and then update the chosen, like this:

$('option').prop('selected', true); //true to select all, and false to deselect.
$('select').trigger('chosen:updated');

This way, you can put it within a click event.

[joelworsham]

+1 pretty please

[mohamedbenjelloun]

+1

[laulaz]

+1

[RodrigoSampaio]

+1

[selvarajpalani]

+1

[selvarajpalani]

and deselect for single select

[gwin003]

+1

[doganmeh]

+1

[taschetto]

+1

[jakefreeberg]

👍 🙏

[varp]

+1

[ghost]

+1

[michaeldevenney]

👍

[cyrilchapon]

+1

[avenet]

+1

[misterjoonas]

+1

[jishakm]

+1