Sélection multiple - Désélectionnez l'option "Tout" lorsque vous sélectionnez autre chose, et vice versa.

Question

J'utilise Sélection multiple avec une option "Tout".

Se référant à cette

En gros, ce que je veux faire, c'est ce qui suit :

1. Si l'utilisateur sélectionne une option autre que "Tout", je veux que "Tout" soit automatiquement désélectionné. travaux en utilisant ça :

   if ($('#customTextFilterSelect option[value="ALL"]').attr('selected') == 'selected' 
           && $("#customTextFilterSelect option:selected").length > 1) {
       $('#customTextFilterSelect option[value="ALL"]').removeAttr("selected");
   }

2. Je souhaite également que l'inverse fonctionne : si l'utilisateur sélectionne "Tout", je veux que les autres options soient automatiquement désélectionnées. pas sûr de la meilleure façon de mettre en œuvre

3. Enfin, si l'utilisateur désélectionne tout (manuellement, en cliquant sur "x"), "Tout" doit être automatiquement sélectionné. type de travail mais l'espace réservé revient lorsque "Tout" est sélectionné, comme si la longueur était égale à 0.

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

Answer 1

Voici la 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
    });
});

Désormais, vous n'avez plus besoin de cet espace réservé, car le contrôle ne se vide jamais. Ainsi, pour vous débarrasser de l'espace réservé, il vous suffit d'ajouter cet attribut à votre commande select .

data-placeholder=" "

Sa valeur doit avoir un espace sinon le choix peut l'écraser.

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

Voici le code fonctionnel sur jsFiddle .

Answer 2

Utilisez le javascript suivant pour ce faire.

$(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();
    });

});

Voici le lien jsFiddle

http://jsfiddle.net/qCzK9/7/