I'm using Chosen Multiple Select with an "All" option.

Referring to this

Basically what I want to happen is the following:

1. 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");
   }
   

2. 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

3. And lastly, if the user unselects everything (manually, by clicking 'x'), "All" should automatically be selected. kind of working, but the placeholder es back when "All" is selected as if length==0

   if ($("#customTextFilterSelect option:selected").length == 0) {
       $('#customTextFilterSelect option[value="ALL"]').attr('selected', 'selected');
   }
   

I'm using Chosen Multiple Select with an "All" option.

Referring to this

Basically what I want to happen is the following:

1. 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");
   }
   

2. 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

3. And lastly, if the user unselects everything (manually, by clicking 'x'), "All" should automatically be selected. kind of working, but the placeholder es back when "All" is selected as if length==0

   if ($("#customTextFilterSelect option:selected").length == 0) {
       $('#customTextFilterSelect option[value="ALL"]').attr('selected', 'selected');
   }
   

• javascript
• jquery
• jquery-chosen

Share Improve this question Follow edited Mar 28, 2013 at 19:40 j0k 22.8k2828 gold badges8181 silver badges9090 bronze badges asked Jan 19, 2013 at 3:14 GadyGady 4,99588 gold badges4242 silver badges4848 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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.

Use the following javascript to do this.

$(function () {
    //Defining the 'ALL' as default option.
    var prevdata = ["ALL"];
    $('.chzn-select').chosen().change(function(e) {

        if ($(this).find("option:selected").length === 0) {
            $(this).find("option[value='ALL']").attr('selected', 'selected');
        } else {
            var cur_date = $(this).val();

            if ($(this).find("option[value='ALL']").attr("selected") == "selected" && $(this).find("option:selected").length > 1)
                $(this).find("option[value='ALL']").removeAttr("selected");

            if(( $.inArray('ALL', prevdata) == -1) && $.inArray('ALL', cur_date) > -1){

               $(this).find('option').removeAttr('selected');
                $(this).find("option[value='ALL']").attr("selected", "selected");
               }
        }
        $('.chzn-select').trigger("liszt:updated");

        //Storing the current processed value 
        prevdata = $('#customTextFilterSelect').val();
    });

});

Following is the jsFiddle link

http://jsfiddle/qCzK9/7/