前言
最近一直在用bootstrap 的一些東西，寫幾篇博客記錄下。。。。
bootstrap selectpicker是bootstrap里比較簡單的一個下拉框的組件，先看效果如下：
附上官網api鏈接，http://silviomoreto.github.io/bootstrap-select/.
下拉框的使用上基本操作一般是：單選、多選、模糊搜索、動態賦值等，下面來看如何使用：
使用方法如下
1、首先需要引入的css和js：
bootstrap.css
bootstrap-select.min.css
jquery-1.11.3.min.js
bootstrap.min.js
bootstrap-select.min.js
2、js代碼如下：
$(function() { $(".selectpicker").selectpicker({ noneSelectedText : '請選擇'//默認顯示內容 }); //數據賦值 var select = $("#slpk"); select.append("<option value='1'>香蕉</option>"); select.append("<option value='2'>蘋果</option>"); select.append("<option value='3'>橘子</option>"); select.append("<option value='4'>石榴</option>"); select.append("<option value='5'>棒棒糖</option>"); select.append("<option value='6'>桃子</option>"); select.append("<option value='7'>陶子</option>"); //初始化刷新數據 $(window).on('load', function() { $('.selectpicker').selectpicker('refresh'); }); }); 3、jsp內容：
<select id="slpk" class="selectpicker" data-live-search="true" multiple></select>
設置multiple時為多選，data-live-search="true"時顯示模糊搜索框，不設置或等于false時不顯示。
4、其他方法：
獲取已選的項：
var selectedValues = []; slpk:selected").each(function(){ selectedValues.push($(this).val()); }); 選擇指定項（編輯回顯使用）：
單選：$('.selectpicker').selectpicker('val', ‘列表id');
多選：var arr=str.split(','); $('.selectpicker').selectpicker('val', arr);
5、附上我的源碼，下拉數據通過ajax從后臺獲取：
$(function() { $(".selectpicker").selectpicker({ noneSelectedText : '請選擇' }); $(window).on('load', function() { $('.selectpicker').selectpicker('val', ''); $('.selectpicker').selectpicker('refresh'); }); //下拉數據加載 $.ajax({ type : 'get', url : basePath + "/lictran/tranStation/loadRoadForTranStationDetail", dataType : 'json', success : function(datas) {//返回list數據并循環獲取 var select = $("#slpk"); for (var i = 0; i < datas.length; i++) { select.append("<option value='"+datas[i].ROAD_CODE+"'>" + datas[i].ROAD_NAME + "</option>"); } $('.selectpicker').selectpicker('val', ''); $('.selectpicker').selectpicker('refresh'); } }); }); 總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
