bootstrap-select使用教程-下拉框搜索功能实现
一、引入
1 <!-- Bootstrap 核心 CSS 文件 --> 2 <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 3 4 <!-- Bootstrap-select 核心 CSS 文件 --> 5 <link rel="stylesheet" href="/bootstrap/bootstrap-select.min.css"> 6 7 <!-- jQuery文件。务必在bootstrap.min.js 之前引入,bootstrap基于jQuery --> 8 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> 9 10 <!-- Bootstrap 核心 JavaScript 文件 --> 11 <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 12 13 <!-- Bootstrap-select 核心 JavaScript 文件 --> 14 <script src="/bootstrap/bootstrap-select.min.js"></script>
二、HTML代码
1 /* 2 multiple : 多选 3 data-live-search="true" : 是否开启搜索功能 4 data-actions-box="true" : 是否开启全选功能 5 data-max-options="2" : 设置最多选中2个 6 data-selected-text-format="count > 3" ： 缩略模式，比如当选中值大于3个的时候只显示选中项的个数，注意这个属性只对多选生效 7 */ 8 <select name="foreignKeyField" id="foreignKeyField" class="selectpicker show-tick form-control" 9 data-width="98%" 10 data-first-option="false" title='请选择列名(必选)' required data-live-search="true" 11 data-live-search="true" data-actions-box="true" 12 onchange="getKeyField()"> 13 </select>
三、js动态加载
1 //根据id查询其所有属性 2 function getAllFieldsi(id) { 3 var request = { 4 url: prefix + "/getAllFields/" + id, 5 type: "post", 6 async: false, 7 dataType: "json", 8 success: function (result) { 9 let length = result.content.length; 10 var str = ""; 11 for (let i = 0; i < length; i++) { 12 str = str + "<option id=\"" + result.content[i].id + "|" + result.content[i].name + "\" value=\"" + result.content[i].id + "|" + result.content[i].name + "\">" + result.content[i].name + "</option>"; 13 } 14 $("#field").empty(); 15 $("#field").append(str); 16 $('#field').selectpicker("refresh"); 17 $('#field').selectpicker("render"); 18 } 19 }; 20 $.ajax(request); 21 let fieldName = $("#fieldName").val(); 22 $('#field').selectpicker('val', fieldName); 23 $('#field').selectpicker("refresh"); 24 $('#field').selectpicker("render"); 25 }
四、解决使用了selectpicker之后默认选中不生效的问题
1、将Ajax请求设置为同步的，默认是async: true（异步）；
2、然后在整个Ajax请求执行完之后在最后执行默认选中的脚本；
3、在select标签中的HTML内容改变了或者值发生了改变都要使用最后两行脚本refresh和render进行刷新重新渲染，不然容易发生下拉列表的数据不显示
