如何在Select2的change事件中控制多选选择器的选中状态？

嘿，我完全懂你遇到的这个麻烦——在Select2的change事件里修改选中值后，原生select的内容明明变了，但Select2的UI容器却没同步更新，用setTimeout能凑合用，但总觉得这是个不太优雅的hack对吧？

其实这个问题的根源是：你在Select2的change事件回调里直接触发change事件，会和当前的事件循环产生冲突，打断了Select2自身的UI更新逻辑，所以才会出现DOM和UI不同步的情况。不用setTimeout也能解决，给你两个更靠谱的方案：

方案一：用Select2原生API设置值，避免递归事件触发 #

我们可以把事件处理逻辑抽成单独的函数，在需要修改选中值的时候，先暂时解绑事件，修改完成后再重新绑定，同时用Select2的select2("val")方法来设置值——这个方法是Select2 3.x版本专门用来同步UI和选中状态的，比直接操作原生select再trigger事件可靠得多：

function handleMultiSelectChange() {
    const $select = $('#mysel');
    const isNegativeOneSelected = $select.find("option[value=-1]").is(":selected");
    const hasOtherSelectedOptions = $select.find("option[value!=-1]:selected").length > 0;

    if (isNegativeOneSelected && hasOtherSelectedOptions) {
        // 先解绑事件，避免递归触发change
        $select.off("change", handleMultiSelectChange);
        // 用Select2 API设置选中值，自动同步UI
        $select.select2("val", -1);
        // 重新绑定事件，恢复监听
        $select.on("change", handleMultiSelectChange);
    }
}

// 初始化绑定事件
$('#mysel').on("change", handleMultiSelectChange);

方案二：监听Select2专属事件，提前拦截处理 #

Select2 3.5.2已经支持select2:select和select2:unselect这些专属事件了，它们会在原生change事件之前触发，我们可以在这些事件里直接处理选中逻辑，从源头避免冲突：

$('#mysel')
.on("select2:select", function(e) {
    const $select = $(this);
    // 如果刚选中的是value=-1的选项，清空其他所有选中项
    if (e.val === "-1") {
        $select.select2("val", "-1");
    } else {
        // 如果选中的是其他选项，移除-1的选中状态
        const currentSelected = $select.select2("val");
        const updatedSelected = currentSelected.filter(val => val !== "-1");
        $select.select2("val", updatedSelected);
    }
})
.on("select2:unselect", function(e) {
    // 这里可以根据需要处理取消选中的情况，比如取消-1后不影响其他选项
});

用这种方式的话，我们全程用Select2自己的API来操作选中状态，完全不需要担心UI和DOM不同步的问题，也不用依赖setTimeout这种延时hack。

备注：内容来源于stack exchange，提问作者Tobia