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