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 });