本文详解 Bootstrap Selectpicker 在 Bootstrap 5 环境下报错 Uncaught TypeError: Cannot read properties of undefined (reading 'Constructor') 的根本原因，并提供升级适配、版本降级及现代替代方案的完整解决方案。
本文详解 bootstrap selectpicker 在 bootstrap 5 环境下报错 `uncaught typeerror: cannot read properties of undefined (reading 'constructor')` 的根本原因，并提供升级适配、版本降级及现代替代方案的完整解决方案。
在使用 Bootstrap Selectpicker（如 bootstrap-select）增强
Uncaught TypeError: Cannot read properties of undefined (reading 'Constructor')
该错误并非代码书写错误，而是典型的版本兼容性冲突——核心原因是：你当前引入的 bootstrap-select@1.14.x（或更早版本）仅原生支持 Bootstrap 4，而你的项目实际使用的是 Bootstrap 5（从 bootstrap.min.js 路径或行为可推断），而 Bootstrap 5 已彻底移除了 jQuery 依赖，并重构了 JavaScript 插件 API（如 $.fn.modal.Constructor → Modal 类直接导出）。bootstrap-select v1.x 仍尝试访问 $.fn.selectpicker.Constructor，但 Bootstrap 5 的 $.fn.selectpicker 根本未定义，导致 undefined.Constructor 报错。
✅ 正确解决方案（按推荐优先级排序）
1️⃣ 升级至官方 Bootstrap 5 兼容版（首选）
使用社区维护的 Bootstrap 5 专用分支：
<!-- 替换旧的 CSS 和 JS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@2.0.3/dist/css/bootstrap-select.min.css"><script src="https://cdn.jsdelivr.net/npm/bootstrap-select@2.0.3/dist/js/bootstrap-select.min.js"></script>
✅ bootstrap-select@2.x 是专为 Bootstrap 5 重构的版本，完全兼容，API 向后兼容（.selectpicker() 仍可用），且持续维护。
2️⃣ 若必须用 v1.x：强制降级 Bootstrap 至 v4.6.2
确保整个项目使用 Bootstrap 4：
<!-- 移除 Bootstrap 5，改用 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
⚠️ 注意：需同步检查其他插件（如 bootstrap-table）是否兼容 Bootstrap 4。
3️⃣ 现代无依赖替代方案（推荐长期演进）
放弃 jQuery 依赖，采用轻量、原生、ESM 友好的方案，例如 choices.js：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js@10.3.0/public/assets/styles/choices.min.css"><select id="repairProductInput" class="form-control repair-inputs" required><option value="">Lütfen Bir Ürün Seçiniz*</option>
@foreach (var item in Model.ProductsList)
{
<option value="@item.Value">@item.Text</option>
}
</select>
// repair.js 中初始化（无需 jQuery）
document.addEventListener('DOMContentLoaded', () => {
new Choices('#repairProductInput', {
searchEnabled: true,
placeholder: true,
placeholderValue: 'Ürün ara...',
shouldSort: false
});
});
? 排查关键点（务必检查）
- ✅ 确认 Bootstrap 主版本：查看 bootstrap.min.js 文件头注释或控制台输出 Bootstrap.VERSION；
- ✅ 检查加载顺序：jQuery → Bootstrap → bootstrap-select（v1.x）或 bootstrap-select@2.x（无需 jQuery）；
- ✅ 避免混用 CDN：unpkg.com 与 jsdelivr.net 版本可能不一致，统一使用 jsDelivr（更稳定）；
- ❌ 删除冗余库：bootstrap-table 与 bootstrap-select 无强依赖关系，若未使用表格功能可移除以减少冲突。
? 总结
Cannot read properties of undefined (reading 'Constructor') 是 Bootstrap 5 与旧版 bootstrap-select 的“时代错位”信号。不要修补报错，而应升级工具链：优先采用 bootstrap-select@2.x，或转向 Choices.js/TomSelect 等现代方案。这不仅能解决当前问题，更能提升项目可维护性与性能表现。
