Bootstrap Select多选下拉框无法正常显示选项问题求助

我尝试创建带多选功能的下拉框（测试用例），引入的资源和代码如下：

引入的CSS文件 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>

引入的脚本文件 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

下拉框代码 #

<select th:field="*{cars}" class="form-control selectpicker" multiple data-live-search="true">
    <option value="" selected disabled>Choose Role</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select><br/>

问题 #

添加selectpicker类后下拉框显示异常；移除class属性后，原生多选下拉框显示正常。

解决方法 #

1. 调整CSS引入顺序
   Bootstrap基础CSS必须在bootstrap-select的CSS之前加载，否则样式会被覆盖导致异常。修改后的顺序：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css"/>

2. 移除冲突类名
   form-control和selectpicker的样式存在冲突，只保留selectpicker类即可：

<select th:field="*{cars}" class="selectpicker" multiple data-live-search="true">
    <!-- 选项内容 -->
</select>

3. 确保组件初始化
   页面加载完成后手动初始化bootstrap-select，避免DOM未加载完成导致的初始化失败：

$(document).ready(function(){
    $('.selectpicker').selectpicker();
});

4. 检查版本兼容性
   确认jQuery、Bootstrap和bootstrap-select版本兼容：当前Bootstrap 4.1.1搭配bootstrap-select 1.13.1是兼容的，jQuery 3.5.1也适配这个组合。

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