Question

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

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

如果用户选择“全部”以外的任何选项，我希望自动取消选中“全部” - 工作：

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');
}
```

Answer 1

以下是解决方案：

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

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

data-placeholder=" "

它的值应该有空格，否则选择可能会覆盖它。

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

这是working code on jsFiddle。

Answer 2

使用以下javascript执行此操作。

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

});

以下是jsFiddle链接

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

选择多项选择 - 在选择其他任何项目时取消选择“全部”选项，反之亦然

2 个答案: