這裏總結一下上次使用bootstrap-select的過程當中遇到的一些問題。至於bootstrap-select的具體使用方法這裏就不介紹了,網上有不少例子。css
地址:html
官方插件地址:https://developer.snapappointments.com/bootstrap-selectjquery
GitHub地址:https://github.com/snapappointments/bootstrap-selectgit
緣由:多是js文件引入順序錯誤。github
正確引入順序:ajax
<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>
方法一:bootstrap
$.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); } });
方法二:app
$.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>"); } } });
緣由:動態生成數據後沒有刷新插件ide
解決辦法:數據加載成功後加入如下兩條語句。this
//使用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();