这里总结一下上次使用bootstrap-select的过程中遇到的一些问题。至于bootstrap-select的具体使用方法这里就不介绍了，网上有很多例子。
地址：
官方插件地址：https://developer.snapappointments.com/bootstrap-select
GitHub地址：https://github.com/snapappointments/bootstrap-select
问题一：点击没有反应，下拉框不出现
原因：可能是js文件引入顺序错误。
正确引入顺序：
- <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
- <link href="lib/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
- <script src="lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
- <script src="lib/bootstrap/js/bootstrap.min.js"></script>
- <script src="lib/bootstrap-select/js/bootstrap-select.js"></script>
问题二：如何加载动态数据
方法一：
- $.get("/test/ajax", function(result){
- if(result.code == 0){
- var addhtml = "";
- for (var i = 0; i < result.data.length; i++){
- addhtml += "<option value="+ result.data[i]['id'] +">"+ result.data[i]['name'] +"</option>";
- }
- $('.selectpicker').html(addhtml);
- }
- });
方法二：
- $.get("/test/ajax", function(result){
- if(result.code == 0){
- for (var i = 0; i < result.data.length; i++){
- $('.selectpicker').append("<option value="+ result.data[i]['id'] +">"+ result.data[i]['name'] +"</option>");
- }
- }
- });
问题三：动态加载数据不显示
原因：动态生成数据后没有刷新插件
解决办法：数据加载成功后加入以下两条语句。
- //使用refresh方法更新UI以匹配新状态
- $('.selectpicker').selectpicker('refresh');
- //render方法强制重新渲染引导程序
- $('.selectpicker').selectpicker('render');
问题四：使用筛选时，如果同时出现中文和英文，则搜索会出现问题
解决办法：
注释bootstrap-select.js文件中的以下代码：
- that.$lis.not('.hidden, .divider, .dropdown-header').eq(0).addClass('active').children('a').focus();
- $(this).focus();
经验首页