博客

bootstrap中selectpicker下拉框使用方法实例

  • Post author:
  • Post category:其他


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代码如下：


?
1
2
3
4

$(


function


() {



$(


".selectpicker"


).selectpicker({



noneSelectedText :


'请选择'


//默认显示内容



});


?
1
2
3
4
5
6
7
8
9

//数据赋值

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>"


);


?
1
2
3
4
5

//初始化刷新数据



$(window).on(


'load'


,


function


() {



$(


'.selectpicker'


).selectpicker(


'refresh'


);



});

});


3、jsp内容：


?
1

<


select


id


=


"slpk"


class


=


"selectpicker"


data-live-search


=


"true"


multiple></


select


>

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


4、其他方法：

获取已选的项：


?
1
2
3
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从后台获取：


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$(


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'


);



}



});



});