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 : '請選擇'
});