Bootstrap selectpicker库报错Uncaught TypeError问题求助

错误原因 #

这个错误核心是bootstrap-select与Bootstrap版本不兼容：

• 你当前使用的bootstrap-select 1.13.14仅支持Bootstrap 3.x、4.x版本；
• 若你引用的bootstrap.min.js是Bootstrap 5.x版本，两者API会出现冲突，触发该报错。

解决方案 #

方案1：升级bootstrap-select到兼容Bootstrap 5的版本 #

替换现有bootstrap-select的CSS和JS引用为支持Bootstrap 5的版本（推荐1.14.0-beta3及以上）：

<!-- 替换CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css">

<!-- 替换JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>

方案2：降级Bootstrap到4.x版本 #

若不想升级bootstrap-select，可将Bootstrap版本换成4.x（比如4.6.2）：

<!-- 替换Bootstrap CSS和JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

额外检查点 #

• 确认页面没有重复加载jQuery或Bootstrap文件，避免全局变量冲突；
• 确保$(document).ready()中的$('.selectpicker').selectpicker()在bootstrap-select加载完成后执行（你当前的代码加载顺序是正确的）。

验证代码示例 #

调整后的完整引用顺序（以Bootstrap 5+兼容版bootstrap-select为例）：

<!-- CSS部分 -->
<link href="~/Content/css/repair.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css">

<!-- JS部分 -->
<script src="~/Scripts/jquery-3.7.0.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table-locale-all.min.js"></script>
<script src="~/Content/js/repair.js"></script>
<script>
    $(document).ready(function () {
        $('.selectpicker').selectpicker();
    });
</script>

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