bootstrap selectpicker 下拉框使用详解
来源:互联网 发布:诺基亚n900运行windows 编辑:程序博客网 时间:2024/06/03 03:43
最近一直在用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');}});});
阅读全文
0 0
- bootstrap selectpicker 下拉框使用详解
- bootstrap-select selectpicker插件的使用 添加全选的问题
- bootstrap selectpicker控件select下拉框动态数据无法回显的问题 && 不可编辑的下拉框数据提交至后台
- bootstrap selectpicker 动态加载数据
- bootstrap selectpicker 动态增加选项
- 使用bootstrap实现下拉框搜索功能
- 使用bootstrap实现下拉框绑定多选框
- bootstrap selectpicker 通过代码指定选中值
- bootstrap 显示下拉框
- BootStrap 下拉框插件
- bootstrap输入框下拉
- bootstrap下拉框
- bootstrap的多选下拉框的使用
- bootstrap中的选择下拉框中的一些使用选择
- 使用bootstrap和jQuery制作下拉输入框
- bootstrap里bootstrap动态加载下拉框
- bootstrap-组合上、下拉框
- Bootstrap-select搜索下拉框
- C#--使用美化方法设计通用登录窗体
- UVA
- UVA
- linux内存管理之节点描述符
- 金婚之旅,沉思微积分演变历史
- bootstrap selectpicker 下拉框使用详解
- C语言字符串操作总结大全(超详细)
- react native开发中eslint配置和初始化
- 深度自学
- centos7配置网络
- 9.10+9.14+9.16
- Android广播机制
- 静态链接库LIB和动态链接库DLL的区别
- 为什么有Angular1.x、Angular2.x和Angular4.x,没听说Angular3.x?