bootstrap select下拉框动态数据

来源于 https://blog.csdn.net/jokewinl/article/details/88355857

需引入bootstrap-select.js和bootstrap-select.min.css,地址:https://gitee.com/jolone/source.git

select class=“selectpicker” multiple selectpicker和multiple属性的搭配使用可实现多选

data-live-search=“true” 这个属性的默认值是false,作用是打开模糊筛查搜索框。

data-max-options 这个属性表示最多可选几个,搭配multiple使用,

data-selected-text-forma缩略模式, 用法:data-selected-text-format=“count > 3”,

当选中值大于3个的时候只显示选中项的个数,注意只对多选生效。

data-style 表示默认选中样式,

data-size data-size=“6”,表示下拉框显示的下拉列表数量。

data-dropup-auto=“false”, 表示下拉框默认向下展开;“true”,表示下拉框默认向下展开;

 1 <li>
 2             <label class="label_name" th:text="${model.customer}"></label>
 3             <div class=\'col-xs-8 col-sm-8\'>
 4                 <select id ="customer"class="selectpicker" data-live-search="true">
 5                     <option data-tokens="ketchup mustard" value="0" th:text="${model.selectCustomer}"></option>
 6                 </select>
 7             </div>
 8         </li>
 9 
10  //检索客户
11     $("#customer").on(\'shown.bs.select\',function(e){
12         var deviceStr="" ;
13         $.ajax({
14             type: "GET",
15             url: "cuSelectCustomer",
16             data: {},
17             async: false,
18             dataType: "json",
19             success: function (result) {
20                 if (result.ok) {
21                     for (var i = 0; i < result.data.length; i ++){
22                          deviceStr+=\'<option  value="\' + result.data[i].customerId + \'">\' +result.data[i].name + \'</option>\';
23                     }
24                 }
25             },
26             error: function (XMLHttpRequest) {
27                 layer.alert(messages.systemE, {
28                     title: messages.promptBox,
29                     icon: 0,
30                     btn: messages.btn,
31                 });
32                 // alert("error" + XMLHttpRequest.readyState);
33             }
34 
35         });
36         $("#customer").html("");
37         $(\'#customer\').append(deviceStr);
38         $(\'#customer\').selectpicker(\'refresh\');
39     });