Chosen Multiple Select - Unselect "All" option when selecting anything else, and vice versa

javascript, jquery, jquery-chosen

Solution

Here is the solution:

$(function()
{
    var cSelect = $('.chzn-select').chosen();
    var allItem = cSelect.find("option[value='ALL']"); //reference to the "ALL" option
    var rest = cSelect.find("option[value!='ALL']"); //reference for the rest of the options
    var allItemAlreadySelected = true; //set a flag for the "ALL" option's previous state

    cSelect.change(function(event)
    {   
        if ($(this).find("option:selected").length == 0) //if no selection
        {
            allItem.prop('selected', true); //select "ALL" option
        }
        else
        {
            if (allItem.is(':selected')) //currently "ALL" option is selected, but:
            {
                if (allItemAlreadySelected == false) //if previously not selected
                {
                    rest.prop('selected', false); //deselect rest
                    allItem.prop('selected', true); //select "ALL" option
                }
                else //if "ALL" option is previously selected (already), it means we have selected smthelse
                    allItem.prop('selected', false); //so deselect "ALL" option
            }
        }
        allItemAlreadySelected = allItem.is(':selected'); //update the flag
        $('.chzn-select').trigger("liszt:updated"); //update the control
    });
});

Now, you don't need that placeholder at all bec. the control now never gets empty. So, to get rid of the placeholder, all you have to do is; add this attribute to your `select`.

data-placeholder=" "

It's value should have a space, otherwise choosen may overwrite it.

<select data-placeholder=" " id="customTextFilterSelect" multiple='multiple' style="width:350px;" class="chzn-select">

Here is the working code on jsFiddle.

Problem

I'm using Chosen Multiple Select with an "All" option. Referring to this Basically what I want to happen is the following: If the user selects any option other than "All", I want "All" to be automatically unselected - works using this: ``` if ($('#customTextFilterSelect option[value="ALL"]').attr('selected') == 'selected' && $("#customTextFilterSelect option:selected").length > 1) { $('#customTextFilterSelect option[value="ALL"]').removeAttr("selected"); } ``` I also want the opposite to work - if the user selects "All", I want other options to be automatically unselected. not sure how to best implement And lastly, if the user unselects everything (manually, by clicking 'x'), "All" should automatically be selected. kind of working, but the placeholder comes back when "All" is selected as if length==0 ``` if ($("#customTextFilterSelect option:selected").length == 0) { $('#customTextFilterSelect option[value="ALL"]').attr('selected', 'selected'); } ```

Original source