bootstrap-select使用过程中的一些问题

 

这里总结一下上次使用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();

 

问题五:不选时默认显示内容 

解决办法

$(".selectpicker").selectpicker({
   noneSelectedText : '请选择'
});

 

posted @ 2019-07-07 09:54  幽篁晓筑  阅读(3394)  评论(1编辑  收藏  举报