Bootstrap-select与Bootstrap 5不兼容无法正常使用问题求助

问题根因 #

你遇到的报错和组件不生效问题，核心是版本不兼容：

• 你当前使用的bootstrap-select@1.13.14属于老旧版本，仅支持Bootstrap 3、Bootstrap 4，完全不兼容Bootstrap 5。
• 你看到的selectpicker被设置display: none!important是组件的默认初始规则：正常运行场景下，组件初始化完成后会自动生成自定义下拉UI替换原生的select标签，原生标签会保持隐藏状态。因为组件初始化失败，自定义UI没有生成、原生标签又被隐藏，才会出现组件空白的问题。手动修改原生select的display属性没有意义，无法得到bootstrap-select的自定义交互效果。

解决方案 #

按以下步骤调整即可恢复正常：

1. 替换bootstrap-select版本：使用适配Bootstrap 5的版本，最低要求为1.14.0-beta1及以上版本，推荐使用最新的beta稳定版。
2. 严格按照以下顺序引入所有依赖资源：
   • 先引入Bootstrap 5的CSS文件
   • 再引入bootstrap-select的CSS文件
   • 引入Popper.js（Bootstrap 5下拉组件必备依赖，需放在Bootstrap JS之前引入）
   • 引入Bootstrap 5的JS文件
   • 最后引入bootstrap-select的JS文件
3. 页面DOM加载完成后，手动触发组件初始化，示例代码如下：

// jQuery写法（需提前引入jQuery）
$(function () {
  $('.selectpicker').selectpicker();
});

// 原生JS写法
document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.selectpicker').forEach(el => {
    new bootstrap.Selectpicker(el);
  });
});

如果不需要使用bootstrap-select的特殊功能，也可以直接使用Bootstrap 5原生的表单下拉组件，无需引入额外第三方依赖。

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