Bootstarp selectpicker 下拉框模糊查询

最近一直在用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代码如下：

 

 

[javascript] view plain copy

1. $(function() {  
2.         $(".selectpicker").selectpicker({  
3.             noneSelectedText : '请选择'//默认显示内容  
4.         });  

[javascript] view plain copy

1.               //数据赋值  
2. var select = $("#slpk");  
3. select.append("<option value='1'>香蕉</option>");  
4. select.append("<option value='2'>苹果</option>");  
5. select.append("<option value='3'>橘子</option>");  
6. select.append("<option value='4'>石榴</option>");  
7. select.append("<option value='5'>棒棒糖</option>");  
8. select.append("<option value='6'>桃子</option>");  
9. select.append("<option value='7'>陶子</option>");  
10.                 

[javascript] view plain copy

1.                //初始化刷新数据  
2.     $(window).on('load', function() {  
3.         $('.selectpicker').selectpicker('refresh');  
4.     });  
5.   
6. });  

 

 

 

3、jsp内容：

 

 

 

[javascript] view plain copy

1. <select id="slpk" class="selectpicker" data-live-search="true" multiple></select>  

 

设置multiple时为多选，data-live-search="true"时显示模糊搜索框，不设置或等于false时不显示。

 

4、其他方法：

 

获取已选的项：

 

[javascript] view plain copy

1.               var selectedValues = [];      
2. slpk:selected").each(function(){  
3. selectedValues.push($(this).val());   
4. });  

 

 

 

 

 

选择指定项（编辑回显使用）：

        单选：$('.selectpicker').selectpicker('val', ‘列表id’);

切记:这里的列表ID是你动态加载的value属性的值一致,不然不会默认选中的(前提是已经加载完毕,这里的值已经加载到select下)

        多选：var arr=str.split(','); $('.selectpicker').selectpicker('val', arr);

 

 

5、附上我的源码，下拉数据通过ajax从后台获取：

 

[javascript] view plain copy

1. $(function() {  
2.         $(".selectpicker").selectpicker({  
3.             noneSelectedText : '请选择'  
4.         });  
5.   
6.         $(window).on('load', function() {  
7.             $('.selectpicker').selectpicker('val', '');  
8.             $('.selectpicker').selectpicker('refresh');  
9.         });  
10.   
11.         //下拉数据加载  
12.         $.ajax({  
13.             type : 'get',  
14.             url : basePath + "/lictran/tranStation/loadRoadForTranStationDetail",  
15.             dataType : 'json',  
16.             success : function(datas) {//返回list数据并循环获取  
17.                 var select = $("#slpk");  
18.                 for (var i = 0; i < datas.length; i++) {  
19.                     select.append("<option value='"+datas[i].ROAD_CODE+"'>"  
20.                             + datas[i].ROAD_NAME + "</option>");  
21.                 }  
22.                 $('.selectpicker').selectpicker('val', '');  
23.                 $('.selectpicker').selectpicker('refresh');  
24.             }  
25.         });  
26.     });  
27.