fieldset元素内Select2无法正常生效问题求助，使用jQuery v3.2.1、Bootstrap v4.0.0-beta

该问题是Bootstrap v4.0.0-beta测试版的已知兼容性bug：这个版本的Bootstrap默认给<fieldset>元素设置了pointer-events: none样式规则，会拦截所有内部元素的鼠标交互事件，导致Select2的点击唤起下拉、选项选择、搜索输入等操作全部无法正常触发。

• 方案1（临时修复，无需升级依赖）：新增自定义CSS规则覆盖Bootstrap的默认样式即可

/* 全局所有fieldset都恢复交互 */
fieldset {
  pointer-events: auto;
}

/* 仅给包含Select2的fieldset添加，避免影响其他原有逻辑 */
fieldset.with-select2 {
  pointer-events: auto;
}

如果使用后者，需要给你代码里的fieldset标签加上对应的类：<fieldset class="with-select2">

• 方案2（永久修复，推荐）：将Bootstrap升级到v4.0.0正式版及以上版本，该bug在正式版中已经被官方修复，不需要额外添加自定义样式。

另外需要确保Select2的初始化逻辑正确，示例初始化代码如下：

// 必须等待DOM加载完成后再执行初始化
$(document).ready(function() {
  $('.gender-select').select2({
    width: '100%', // 适配Bootstrap表单的宽度，避免下拉框溢出
    // 其他你需要的Select2配置项
  });
});

内容的提问来源于stack exchange，提问作者Mohammed Hossain