bootstrap中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代码如下:
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' ); } }); }); |
总结
bootstrap中selectpicker下拉框使用方法实例的更多相关文章
- 选择屏幕中的下拉框和dialog中下拉框设计
REPORT YTEST014. PARAMETERS: auart LIKE vapma-auart AS LISTBOX VISIBLE LENGTH 6. AT SELECTION-SC ...
- ASP.NET MVC中的cshtml页面中的下拉框的使用
ASP.NET MVC中的cshtml页面中的下拉框的使用 用上@Html.DropDownList 先记下来..以做备忘...
- element-UI中el-select下拉框可搜索时候,filter-method自定义搜索方法
使用element-UI框架的使用,我们经常使用el-select下拉框,很多时候还需要使用可搜索的下拉框,然后elementUI官网的实例中只是提了一下filter-method可以自定义搜索方法, ...
- firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)
问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...
- Bootstrap selectpicker 下拉框多选获取选中value和多选获取文本值
1.页面代码: 页面引入: bootstrap-select.min.css和 bootstrap-select.min.js. defaults-zh_CN.min.js文件,并初始化下拉选项框. ...
- selenium中的下拉框处理模块Select
在UI自动化测试过程中,经常会遇到一些下拉框,如果我们基于Webdriver操作的话就需要click两次,而且很容易出现问题,实际上Selenium给我们提供了专门的Select(下拉框处理模块). ...
- vue中使用cookie记住用户上次选择(本次例子中为下拉框)
最近工作中碰到一个需求,添加一条数据时,自动记住上次选择的下拉框的数据,刚开始觉得没思路,后来请教了项目组长,组长直接一句,这不很简单吧,直接用cookie,我:....... 好吧,都王的差不多了, ...
- android中自定义下拉框(转)
android自带的下拉框好用不?我觉得有时候好用,有时候难有,项目规定这样的效果,自带的控件实现不了,那么只有我们自己来老老实实滴写一个新的了,其实最基本的下拉框就像一些资料填写时,点击的时候出现在 ...
- actionMode-theme中修改actionmode中more下拉框的背景颜色
今天在做图库修改是,需要修改图库的actionbar某个按钮弹出来的下拉框的背景颜色,在网上找了个方法尝试下,没有打到自己的要求,不过阴差阳错的却修改了more下拉框的背景,再次记录下,也许以后能用的 ...
随机推荐
- jQuery与JavaScript与ajax三者的区别与联系(转)
原文链接: https://blog.csdn.net/qq_43154385/article/details/85003484 通过阅读,对于三者关系有一个比较清晰的认知,对于后期深入学习大有裨益 ...
- 【烦人的字符集】linux字符集问题,中文乱码
[1]快速修改命令 [2]locale 查看现在服务器的字符 [root@Master ~]# localeLANG=en_US.UTF-8LC_CTYPE="zh_CN.UTF-8&quo ...
- [LeetCode] 135. 分发糖果
题目链接 : https://leetcode-cn.com/problems/candy/ 题目描述: 老师想给孩子们分发糖果,有 N 个孩子站成了一条直线,老师会根据每个孩子的表现,预先给他们评分 ...
- A-问题收益率
问题: 在金融中,我们有时会用内部收益率IRR来评价项目的投资财务效益,它等于使得投资净现值NPV等于0的贴现率.换句话说,给定项目的期数T.初始现金流CF0和项目各期的现金流CF1, CF2, …, ...
- 0ctf 2017 kernel pwn knote write up
UAF due to using hlist_add_behind() without checking. There is a pair locker(mutex_lock) at delete_n ...
- git的配置设置
git的基本配置 git是一个版本控制工具,既然是工具,那么就可以根据人的个人喜好来进行设置,git也提供了配置,可以根据自己的喜好来对它进行个性化的设计,以让自己舒服的玩. git有三个配置文件 / ...
- MFC- 网络编程
一.MFC网络编程 a)CAsyncSocket用于异步非阻塞类,用UDP通信: b)CAsyncSocket的子类(派生类):Csocket同步阻塞类,用于TCP通信: c)通信前,必须调用AfxS ...
- 解决Ubuntu环境下在pycharm中导入tensorflow报错问题
环境: Ubuntu 16.04LTS anacoda3-5.2.0 问题: ImportError: No module named tensorflow 原因:之前安装的tensorflow所用到 ...
- 10年前文章_fedora10root登录
fedora10系统root用户登录以及普通用户使用sudo命令1.问题:fedora10默认不能够直接用root用户登录解决方法:我们可以先以普通用户登录$su#vi /etc/pam.d/gdm删 ...
- springboot中常用注解总结
1.@RestController(组合注解):标注在类上,等价于@Controller和@Responsebody @Controller:将该类标记为Controller层的类,并且注入到Spri ...