Bootstrap 5 中 Select2 不能仅靠 theme: 'bootstrap-5' 实现兼容，需确保 jQuery 和 Select2 资源正确加载、避免与 bootstrap-select 混用，并通过 width: '100%'、CSS 重置及 dropdownCssClass 手动适配样式与交互。
Bootstrap 5 表单中用 Select2，不能直接配 theme: 'bootstrap-5' 就完事——多数情况下它会失效，甚至导致下拉不展开、选中项不滚动、键盘导航失灵。
初始化前必须确认的三件事
很多问题其实卡在初始化之前：
-
Select2的 CSS 和 JS 已加载，且顺序正确：select2.min.css在前，select2.min.js在后，zh-CN.js（如需）必须在select2.min.js之后 - 项目中已引入 jQuery（
Select2依赖 jQuery，不是纯 Bootstrap 5 原生组件） -
bootstrap.min.js和bootstrap.min.css已加载，但注意：不要混用bootstrap-select（即bootstrap-select.js）和Select2——它们是两个完全独立的插件，API 不兼容
正确的初始化写法（含 Bootstrap 5 样式适配）
官方 theme: 'bootstrap-5' 主题存在兼容性问题，尤其在较新版本（v4.1+）中常导致 DOM 定位异常。稳妥做法是：不用主题参数，靠 CSS 重置 + 宽度控制来贴合 Bootstrap 5 表单风格：
$(document).ready(function() {
$('#my-select').select2({
width: '100%', // 必须设，否则默认 width:auto 会撑破 Bootstrap 5 的 form-control 宽度
placeholder: '请选择',
allowClear: true,
minimumResultsForSearch: 5, // 选项 ≤5 个时隐藏搜索框，更符合 Bootstrap 5 简洁风格
dropdownCssClass: 'select2-bootstrap5' // 用于后续加自定义样式
});
});
同时补一段轻量 CSS，确保下拉菜单与 Bootstrap 5 圆角、阴影、字体一致：
.select2-container .select2-selection--single {
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
border-radius: 0.375rem;
}
.select2-dropdown {
border-radius: 0.375rem;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}
为什么 theme: 'bootstrap5' 经常不生效
这不是你代码写错了，而是现实限制：
- 官方
bootstrap-5主题仅适配部分 Select2 版本（v4.0.13+），且未覆盖所有交互状态（比如多选 tag 的删除按钮、禁用态颜色） - Bootstrap 5 的
.form-select类与 Select2 生成的 DOM 结构冲突，Select2 会移除原select元素并插入自己的 wrapper，导致.form-select样式丢失 - 键盘导航（↑↓/Enter）依赖
scrollTop计算，而主题错配时，插件无法正确测量选项高度，造成“选中了但看不到”
多选模式下特别要注意的坑
Bootstrap 5 表单里多选 Select2 容易出视觉断裂：
- 原生
select[multiple]被替换后，.form-control类不再起作用，必须手动加width: 100%和height: auto - 选中项 tag 默认背景色是浅蓝（Select2 原生），和 Bootstrap 5 的
primary色系不统一，建议用 CSS 覆盖：.select2-selection__choice { background-color: #0d6efd; border-color: #0a58ca; } - 如果用了
tags: true，用户可自由输入，此时要配合tokenSeparators: [',', ' ']才能识别空格分隔——否则粘连输入会被当一个 tag
真正难的不是初始化那一行代码，而是理解 Select2 是“接管”了原生 select，而不是“增强”它；所有样式、尺寸、交互响应都得从 wrapper 层重新对齐，尤其是和 Bootstrap 5 的 spacing、radius、shadow 这些设计 token 对齐，漏掉任意一项，都会在某个点击、滚动或缩放场景下露馅。
