Select2的open事件中调用select2('open')打开另一Select2失效怎么办

根因说明 #

• Select2 内置了默认逻辑：任意一个下拉框触发打开操作时，会自动关闭所有其他已经打开的Select2实例，避免多个下拉框重叠冲突
• select2:open 事件属于打开流程的同步回调，此时关闭其他实例的逻辑还未执行完成，直接在回调中调用第二个下拉框的open方法，会被刚触发的全局关闭逻辑直接关掉，所以看不到效果
• 按钮点击触发的逻辑和Select2的打开流程没有耦合，不会触发该全局关闭逻辑，因此可以正常执行

修复方案 #

用setTimeout将打开第二个下拉框的逻辑异步延迟执行，等第一个下拉框的打开流程、全局关闭其他实例的逻辑全部执行完成后再触发，修改后的JS代码如下：

$(".js-example-events").select2();

$('.js-example-events').on("select2:open", function () {
    // 延迟执行避开Select2的全局关闭逻辑，大部分场景设为0也可生效，可根据实际情况调整毫秒数
    setTimeout(function() {
        $("#s1").select2("open");
    }, 10);
});

function test(){
    $("#s1").select2("open");
}

内容的提问来源于stack exchange，提问作者rahul.m