从选择标签中选择/取消选择选项

Question

我有一个多重选择下拉菜单，如下所示:

<select id="country" class="form-select" multiple name="country[]">
<option selected value="">All</option>
<option value="1">UK</option>
<option value="2">USA</option>
<option value="3">Germany</option>
<option value="4">Australia</option>
</select>

所以你可以看到默认情况下，选项'All'将被突出显示。我想做的是取消选择选项'All'，如果你选择任何其他选项。

如果你选择了所有的选项，那么我只想选择' all '选项。

举个例子，如果我选择以下选项:

All, UK, USA

那么应该是:

英国和美国

另一个例子是，如果我选择以下内容:

英国、美国、德国和澳大利亚

那么应该是:

如果有人能给我一些建议，我该怎么做，那就太好了。

Answer 1

更改选择菜单时可以触发以下功能:

function _onCountrySelect() {
var _option = jQuery("#country").val();

if (_option[0] == "" && _option.length > 1) {
jQuery("#country").val(_option.slice(1));
}
if ((_option[0] != "" && _option.length == jQuery("#country option").length - 1)) {
jQuery("#country").val("");
}
}
$('#country').on('change', _onCountrySelect);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="country" class="form-select" multiple name="country[]">
<option selected value="">All</option>
<option value="1">UK</option>
<option value="2">USA</option>
<option value="3">Germany</option>
<option value="4">Australia</option>
</select>