javascript – 选择多个选择 – 在选择其他任何内容时取消选择“全部”选项,反之亦然

我正在使用选择多选和“全部”选项.

Referring to this

基本上我想要发生的是以下内容：

>如果用户选择“全部”以外的任何选项,我希望“全部”自动取消选择 – 使用此方法：

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

>我也想要相反的工作 – 如果用户选择“全部”,我希望自动取消选择其他选项.不知道如何最好地实施
>最后,如果用户取消选择所有内容(手动,通过单击“x”),则应自动选择“全部”.有点工作,但是当选择“全部”时,占位符会回来,好像长度== 0

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

解决方法:

这是解决方案：

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

现在,你根本不需要那个占位符.控件现在永远不会变空.所以,要摆脱占位符,你所要做的就是;将此属性添加到您的选择中.

data-placeholder=" "

它的值应该有一个空格,否则选择可能会覆盖它.

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

这是working code on jsFiddle.