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

Question

我有一个"cities“多选列表框，其中包含：

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

Here is a fiddle以显示其行为。