bootstrap中selectpicker下拉框使用方法例項
阿新 • • 發佈：2019-01-25
bootstrap selectpicker是bootstrap裡比較簡單的一個下拉框的元件，先看效果如下：
下拉框的使用上基本操作一般是：單選、多選、模糊搜尋、動態賦值等，下面來看如何使用：
使用方法如下
1、首先需要引入的css和js：
bootstrap.css
bootstrap-select.min.css
jquery-1.11.3.min.js
bootstrap.min.js
bootstrap-select.min.js
2、js程式碼如下：
?| 1234 | $(function() { $(".selectpicker").selectpicker({ noneSelectedText : '請選擇'//預設顯示內容 }); |
| 123456789 | //資料賦值 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>"); |
| 12345 | //初始化重新整理資料 $(window).on('load', function() { $('.selectpicker').selectpicker('refresh'); }); }); |
3、jsp內容：
?| 1 | <selectid="slpk" class="selectpicker" data-live-search="true" multiple></select> |
設定multiple時為多選，data-live-search="true"時顯示模糊搜尋框，不設定或等於false時不顯示。
4、其他方法：
獲取已選的項：
| 1234 | var selectedValues = []; slpk:selected").each(function(){ selectedValues.push($(this).val()); }); |
選擇指定項（編輯回顯使用）：
單選：$('.selectpicker').selectpicker('val', ‘列表id');
多選：var arr=str.split(','); $('.selectpicker').selectpicker('val', arr);
5、附上我的原始碼，下拉資料通過ajax從後臺獲取：
?| 123456789101112131415161718192021222324 | $(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'); } }); }); |