时间戳

首页 > 解决方案 > jQuery Multiple Select - 使用“ALL”选择/取消选择项目

jquery - jQuery Multiple Select - 使用“ALL”选择/取消选择项目

问题描述

我的 jQuery 经验非常有限，并且在选择/取消选择选项时遇到了麻烦。

我有一个多选的汽车列表，默认选项是全部。

当用户选择任何其他选项时，我需要取消选择“全部”以仅将所选选项“选中”。相反，如果用户选择“全部”，我需要确保只选择“全部”并且取消选择已选择的汽车。

以下是我的汽车清单（出于示例目的而减少）；

<select id="carsDropDown" multiple="multiple">
    <option name="carCode" selected="selected" value="ALL">All Cars</option>
    <option value="AUD" name="carCode">Audi</option>  
    <option value="BMW" name="carCode">BMW</option>  
    <option value="FOR" name="carCode">Ford</option>
    <option value="SAB" name="carCode">Saab</option>
    <option value="VOL" name="carCode">Volvo</option>                                                        
</select>

任何帮助是极大的赞赏。

标签： jquerymulti-select

解决方案

试试看：

$(document).on('change','#carsDropDown',function(){
       if($(this).val()=='ALL'){
        $("#carsDropDown :selected").prop('selected', false);
        $("#carsDropDown option").map(function()
        {
            ($(this).val()!='ALL') ? $(this).prop('selected',true) : 0;
        });
       }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <select id="carsDropDown" multiple="multiple">
    <option name="carCode" selected="selected" value="ALL">All Cars</option>
    <option value="AUD" name="carCode">Audi</option>  
    <option value="BMW" name="carCode">BMW</option>  
    <option value="FOR" name="carCode">Ford</option>
    <option value="SAB" name="carCode">Saab</option>
    <option value="VOL" name="carCode">Volvo</option>                                                        
</select>

推荐阅读