Bootstrap带搜索功能Select组件生成两个下拉框问题求助

嗨，我来帮你搞定这个出现两个下拉框的小麻烦～ 这种情况通常是因为依赖引入顺序不对、重复初始化或者样式/脚本重复加载导致的，下面是具体的排查和解决步骤：

1. 检查依赖引入的顺序和完整性 #

Bootstrap Selectpicker依赖jQuery和Bootstrap，必须按正确顺序引入文件，否则会导致插件无法正常工作，出现重复下拉框的问题：

<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 再引入Bootstrap的CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<!-- 接着引入Bootstrap的JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 然后引入Bootstrap Select的CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css">
<!-- 最后引入Bootstrap Select的JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>

2. 排查是否重复加载了脚本/样式 #

如果你在页面中多次引入了bootstrap-select.min.js或者对应的CSS文件，插件会被重复初始化，导致生成多个下拉框结构。仔细检查你的HTML代码，确保每个依赖文件只引入一次。

3. 确保正确初始化插件 #

虽然data-live-search="true"属性可以让插件自动初始化，但有时候手动初始化会更稳妥，同时避免重复初始化：
在页面底部添加这段脚本（确保只加一次）：

$(document).ready(function() {
  // 只初始化一次selectpicker
  $('.selectpicker').selectpicker();
});

注意：如果多次调用selectpicker()方法，也会导致插件重复渲染下拉框。

4. 检查是否有插件冲突 #

如果你的页面中还使用了其他下拉增强类的插件，可能会和Bootstrap Select产生冲突，导致DOM被重复修改。可以暂时禁用其他插件，看看问题是否消失，以此排查冲突源。

另外补充一点：Bootstrap Select的工作原理是隐藏原生的<select>标签，然后生成一个美化后的下拉结构。如果原生的select没有被隐藏，说明插件的样式没有正确加载，这时候也要检查CSS文件是否引入正确。

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