jquery - jquery 多选 - 如何在选择项目时收到通知，并知道选择了哪个项目

Question

我有一个“城市”多选列表框，其中包含：

1 - 第一项是“所有城市”

2 - 剩余项目是所选国家/地区的城市

我正在尝试实现以下行为：

1 - 当第一个项目（“所有城市”）被选中时，取消选择任何其他项目（取消选择任何已经选择的城市项目）

2 - 如果选择了除第一个项目之外的任何项目（选择了一个城市），则取消选择第一个项目（如果已选择）（但不要取消选择任何其他已选择的城市）

我已经尝试处理 onChange - 但我不知道如何获得最后一个被选中的项目。

任何帮助表示赞赏。

Answer 1

好的，所以我假设说“多选列表框”是指<select multiple>元素。

那么我们来...

您提到的第一个行为不需要任何操作，因为这种选择的默认操作是在您单击另一个选项而不CTRL (or CMD in Mac)按下时取消选择所有选项。

对于第二个，您必须监听select元素的变化，然后验证是否选择了该选项以及AllCities是否有另一个选项被选中options。

所以我想要的代码......

你有 HTML：

<select id="cities" multiple>
    <option value="All" selected>All Cities</option>
    <option value="A">City A</option>
    <option value="B">City B</option>
    <option value="C">City C</option>
</select>

以及侦听更改并检查是否选择了选项以及是否All还选择了其他选项的脚本：

$('#cities').on('change',function(){
    var it = $(this);
    if(it.val().indexOf("All") > -1 && it.val().length > 1){
        $('option[value="All"]',it).prop('selected',false);
    }
});

这是一个显示其行为的小提琴。