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

2019-06-25 13:23:27 阅读：255 来源： 互联网

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

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

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

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.

标签：jquery,javascript,jquery-chosen
来源： https://codeday.me/bug/20190625/1286365.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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