<select>中<option>的互斥

背景：我需要将单选和多选功能组合到一个控件中。具体来说，我有很多选项<option>。第一个选项是相互排斥的。因此，如果我选择第一个独占选项，则需要取消选中所有其他选项。如果选择了其他一个，则必须取消选中第一个（如果选中）。其他选项应互不影响。

<select id="myGroup" data-native-menu="false" multiple="multiple">
    <option value="">请选择</option>
    <option value="-1" selected="selected">I am alone</option>
    <option value="1">I am not alone 1</option>
    <option value="2">I am not alone 2</option>
    <option value="3">I am not alone 3</option>
</select>

当select的选择值发生改变时，$("#myGroup").val()会返回所有被选中的值，而不是你点击的值。
如果用户选择选项3，则$("#myGroup").val()变为[-1,3]。我怎样才能知道那是刚刚被选中的‘3’ ？

可以保留一个选定选项的数组，然后在选择一个新选项时对这些数组进行比较。

// 全局变量：
// 要在 MultiSelect 下拉列表中实现独占选项，
// 我们需要跟踪当前选择（这里是一个全局变量）
// 并将此数组与 change() 事件中的最新选择数组进行比较。
var currSel = $('#myGroup').val();

$('#myGroup').on('change', function() {
    var newSel = $(this).val();
    // 从 currSel 中获取差异
    // Diff 方法详见: https://www.cnblogs.com/strongerPian/p/17123597.html
    var diff = newSel.filter(x => !currSel.includes(x));
    // 如果刚刚选择了独占选项，则删除所有其他选项
    if (diff.length) {
        if (diff[0] === '-1') { // '-1'是独占选项
           // 如果独占选项刚刚被选中（“-1”），则 在修改后的选择数组中 取消选择所有其他选项
           newSel = ['-1'];
        } else {
           // 如果非独占选项刚被选中，确保独占选项不在修改后的选择数组中 
           newSel = newSel.filter(el => el !== '-1');
        }
        // 将下拉列表设置为修改后的新选择数组
        $('#myGroup').val(newSel);
    }
    // 将最新的选择数组克隆到当前选择数组中
    currSel = [...newSel];
}

参考：SO