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进行刷新重新渲染，不然容易发生下拉列表的数据不显示