Select2 jQuery控件出现双下拉框、事件触发异常问题求解

根因说明 #

• 双下拉现象是样式冲突导致原生select未被正常隐藏：Select2初始化完成后会默认给原select元素添加select2-hidden-accessible类，通过该类的CSS规则将原生select移出可视区域，仅保留自身渲染的SPAN结构作为唯一交互入口。如果页面自定义CSS覆盖了该类的隐藏规则，或Select2样式文件未正常加载，原生select就会暴露，形成两个可交互的下拉入口。
• select2:select事件仅在SPAN下拉选值时触发是正常逻辑：select2:select是Select2框架定义的专有事件，仅监听通过Select2自定义控件触发的选值操作；直接操作暴露的原生select时，只会触发原生change事件，不会触发该自定义事件。

修复步骤 #

1. 强制隐藏原生select元素 #

优先检查Select2官方样式文件是否正常加载，若确认是样式冲突导致隐藏失效，可添加如下全局CSS强制规则：

.select2-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
}

该规则生效后，页面仅会保留Select2渲染的SPAN结构作为唯一交互入口，双下拉问题直接解决。此时SPAN的点击唤起下拉是Select2的正常交互逻辑，若需要完全禁用SPAN的点击交互、仅保留值展示能力，可额外添加如下CSS：

.select2-selection {
    pointer-events: none;
}

2. 优化事件绑定逻辑 #

可同时绑定Select2自定义事件和原生change事件，避免特殊场景下事件漏触发，同时简化原有取值逻辑：

$('#crypto-symbol-select2-div').on("select2:select change", function (e) {
    const valSelected = $(this).val();
    self.funcOnChange(valSelected);
});

3. 避免重复初始化（可选） #

如果存在重复调用Select2初始化方法的情况，也可能引发异常渲染，可添加初始化前的判断逻辑：

const $select = $('#crypto-symbol-select2-div');
if (!$select.hasClass('select2-hidden-accessible')) {
    $select.select2({
        // 你的Select2配置项
    });
}

内容的提问来源于stack exchange，提问作者Robert Oschler