下面给大家介绍一款集下拉搜索多选框,下拉单选框与一体的bootstrap组件Bootstrap-select,bootstrap-select.js是一款Bootstrap下拉框功能增强插件。它为bootstrap下拉框增加了分组功能,多选功能,搜索功能,自定义内容和图标等多种功能,非常强大。实现效果如下。
一、使用方法
在页面中引入jquery和bootstrap相关文件,以及bootstrap-select.js和bootstrap-select.css文件。
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="dist/css/bootstrap-select.css"><link href="css/jquery.min.css" rel="stylesheet"><link href="css/bootstrap.min.css" rel="stylesheet"><link href="css/bootstrap-select.css" rel="stylesheet">
二、具体用法
带分组的下拉选择框(Select boxes with optgroups)
< select class = "selectpicker" >
< optgroup label = "Picnic" >
< option >Mustard</ option >
< option >Ketchup</ option >
< option >Relish</ option >
</ optgroup >
< optgroup label = "Camping" >
< option >Tent</ option >
< option >Flashlight</ option >
< option >Toilet Paper</ option >
</ optgroup >
</ select >
|
多选下拉框(Multiple select boxes)
< select class = "selectpicker" multiple>
< option >Mustard</ option >
< option >Ketchup</ option >
< option >Relish</ option >
</ select >
|
带搜索功能的下拉框(Live search)
< select class = "selectpicker" multiple>
< option >Mustard</ option >
< option >Ketchup</ option >
< option >Relish</ option >
</ select >
|
关键词(Key words)
< select class = "selectpicker" data-live-search = "true" >
< option data-tokens = "ketchup mustard" >Hot Dog, Fries and a Soda</ option >
< option data-tokens = "mustard" >Burger, Shake and a Smile</ option >
< option data-tokens = "frosting" >Sugar, Spice and all things nice</ option >
</ select >
|
限制选择的数量(Limit the number of selections)
< select class = "selectpicker" multiple data-max-options = "2" >
< option >Mustard</ option >
< option >Ketchup</ option >
< option >Relish</ option >
</ select >
< select class = "selectpicker" multiple>
< optgroup label = "Condiments" data-max-options = "2" >
< option >Mustard</ option >
< option >Ketchup</ option >
< option >Relish</ option >
</ optgroup >
< optgroup label = "Breads" data-max-options = "2" >
< option >Plain</ option >
< option >Steamed</ option >
< option >Toasted</ option >
</ optgroup >
</ select >
|
自定义占位文本(Placeholder)
< select class = "selectpicker" multiple title = "请选择内容。。" >
< option >Mustard</ option >
< option >Ketchup</ option >
< option >Relish</ option >
</ select >
|
替换文本(Selected text)
< select class = "selectpicker" >
< option title = "Combo 1" >Hot Dog, Fries and a Soda</ option >
< option title = "Combo 2" >Burger, Shake and a Smile</ option >
< option title = "Combo 3" >Sugar, Spice and all things nice</ option >
</ select >
|
多选下拉框的显示格式(Selected text format)
通过data-selected-text-format
属性,可以指定在多选下拉框选择选项后的显示格式。支持的属性有:
values
:用逗号分隔选择项。(默认)
count
:当选项等于一个时,显示选择选项的数量。
count > x
:当选项大于某个数值时,从显示逗号分隔的多个值改为显示选择的数量。
static
:总是显示选择的替换文本。
< select class = "selectpicker" multiple data-selected-text-format = "count" >
< option >Mustard</ option >
< option >Ketchup</ option >
< option >Relish</ option >
</ select >
< select class = "selectpicker" multiple data-selected-text-format="count > 3">
< option >Mustard</ option >
< option >Ketchup</ option >
< option >Relish</ option >
< option >Onions</ option >
</ select >
|
按钮样式(Button classes)
通过data-style
属性来为下拉框设置情景样式。
< select class = "selectpicker" data-style = "btn-primary" >
...
</ select >
< select class = "selectpicker" data-style = "btn-info" >
...
</ select >
< select class = "selectpicker" data-style = "btn-success" >
...
</ select >
< select class = "selectpicker" data-style = "btn-warning" >
...
</ select >
< select class = "selectpicker" data-style = "btn-danger" >
...
</ select >
|
勾选图标(Checkmark on selected option)
在已经选择的选项上添加勾选图标。
< select class = "selectpicker show-tick" >
< option >Mustard</ option >
< option >Ketchup</ option >
< option >Relish</ option >
</ select >
|
下拉框箭头(Menu arrow)
为下拉框添加一个箭头。
< select class = "selectpicker show-menu-arrow" >
< option >Mustard</ option >
< option >Ketchup</ option >
< option >Relish</ option >
</ select >
|
自定义分割线样式(Style individual options)
可以自定义分割线样式。
.special {
font-weight: bold !important;
color: #fff !important;
background: #bc0000 !important;
text-transform: uppercase;
}
< select class = "selectpicker" >
< option >Mustard</ option >
< option class = "special" >Ketchup</ option >
< option style = "background: #5cb85c; color: #fff;" >Relish</ option >
</ select >
|
下拉框宽度(Width)
可以自定义下拉框的宽度。
< div class = "row" >
< div class = "col-xs-3" >
< div class = "form-group" >
< select class = "selectpicker form-control" >
< option >Mustard</ option >
< option >Ketchup</ option >
< option >Relish</ option >
</ select >
</ div >
</ div >
</ div >
|
还可以通过data-width
属性来设置下拉框的宽度。
< select class = "selectpicker" data-width = "auto" >
...
</ select >
< select class = "selectpicker" data-width = "fit" >
...
</ select >
< select class = "selectpicker" data-width = "100px" >
...
</ select >
< select class = "selectpicker" data-width = "75%" >
...
</ select >
|
图标(Icons)
可以通过data-icon
属性来为选项设置一个图标。
< select class = "selectpicker" >
< option data-icon = "glyphicon-heart" >Mustard</ option >
< option data-icon = "glyphicon-star" >Ketchup</ option >
< option data-icon = "glyphicon-paperclip" >Relish</ option >
</ select >
|
自定义内容(Custom content)
可以通过data-content
属性来为选项插入HTML内容。
< select class = "selectpicker" >
< option data-content="<span class = 'label label-success' >Mustard</ span >">Mustard</ option >
< option data-content="<span class = 'label label-info' >Ketchup</ span >">Ketchup</ option >
< option data-content="<span class = 'label label-primary' >Relish</ span >">Relish</ option >
</ select >
|
子文本(Subtext)
可以通过data-size
属性来为选项添加一个子描述文本。
< select class = "selectpicker" data-size = "5" >
< option data-subtext = "Heinz" >Mustard</ option >
< option data-subtext = "ok" >Ketchup</ option >
< option data-subtext = "hello" >Relish</ option >
</ select >
|
菜单显示多少项(Menu size)
菜单的尺寸默认为auto
。如果设置菜单尺寸为false
或0,则显示所有的菜单项。你可以通过data-size
属性来设置指定的菜单尺寸。下面的菜单只显示2项。
< select class = "selectpicker" data-size = "2" >
< option data-subtext = "Heinz" >Mustard</ option >
< option data-subtext = "ok" >Ketchup</ option >
< option data-subtext = "hello" >Relish</ option >
</ select >
|
全选或全不选(Select/deselect all options)
通过data-actions-box="true"
来对下拉框进行全选或全不选。
< select class = "selectpicker" multiple data-actions-box = "true" >
< option data-subtext = "Heinz" >Mustard</ option >
< option data-subtext = "ok" >Ketchup</ option >
< option data-subtext = "hello" >Relish</ option >
</ select >
|
分隔线(Divider)
通过data-divider="true"
来设置下拉框的分隔线。
< select class = "selectpicker" >
< option >Mustard</ option >
< option data-divider = "true" ></ option >
< option >Ketchup</ option >
< option >Relish</ option >
</ select >
|
菜单头部(Menu header)
通过data-header
来设置下拉框设置一个菜单头选项。
< select class = "selectpicker" data-header = "Select a condiment" >
< option >Mustard</ option >
< option >Ketchup</ option >
< option >Relish</ option >
</ select >
|
箭头方向(Dropup menu)
通过.dropup
class来手动设置小箭头的方向为向上方向。
< select class = "selectpicker dropup" >
< option >Mustard</ option >
< option >Ketchup</ option >
< option >Relish</ option >
</ select >
|
禁用下拉框(Disabled select box)
通过disabled
属性来禁用下拉框。
< select class = "selectpicker" disabled>
< option >Mustard</ option >
< option >Ketchup</ option >
< option >Relish</ option >
</ select >
|
禁用菜单项(Disabled options)
通过为菜单项添加.disabled
属性来禁用它。
< select class = "selectpicker disabled" >
< option >Mustard</ option >
< option disabled>Ketchup</ option >
< option >Relish</ option >
</ select >
|
禁用下拉框分组(Disabled option groups)
通过为分组添加.disabled
属性来禁用它。
< select class = "selectpicker test" >
< optgroup label = "Picnic" disabled>
< option >Mustard</ option >
< option >Ketchup</ option >
< option >Relish</ option >
</ optgroup >
< optgroup label = "Camping" >
< option >Tent</ option >
< option >Flashlight</ option >
< option >Toilet Paper</ option >
</ optgroup >
</ select >
|
参考文档:
http://www.htmleaf.com/jQuery/Form/201802134981.html
http://www.htmleaf.com/Demo/201802134982.html
https://github.com/snapappointments/bootstrap-select
Bootstrap下拉单选框,下拉搜索多选框Bootstrap-select相关推荐
- java得到选择的复选框_java怎么获取复选框的值_java学习记录20200817
2020.08.17-2020.08.23学习计划: (1)完成前端知识积累HTML+CSS+JavaScript(周一至周四) (2)完成ssm两门课复习(周一至周五) (3)完成所有已学代码的熟悉 ...
- PyQt5 技巧篇-复选框绑定行内容,全选、清空、展示选中的内容功能实现演示,设置复选框选中,检查复选框选中状态
先看效果图,选中了几行,然后将选中的内容展示出来. 我设置两个有序序列,分别存储对应的复选框和行内容. 我的行内容是用的 label 标签. # 存储右边label组件的有序列表def get_L_b ...
- 方形勾选框html,Selenium之勾选框操作
勾选框操作: 所谓勾选框,也可以叫复选框,意思是可以勾选一个及以上或全部勾选.勾选框的图标一般都是方形的. 复选框勾选一般分为三种情况: ①勾选单个框,我们直接用元素定位的方式定位到点击即可. ②勾选 ...
- jqgrid表格下拉搜索多选框优化—使用select下拉多选插件
jqgrid表格插件应该是表格插件中最强大吧,最近项目需要使用jqgrid但又要根据项目需求进行一些私人订制,还好jqgrid的源码写清晰易懂. jqgrid有个下拉搜索的功能,我们先看下官网的展示, ...
- java swing 下拉复选框_Java Swing JCheckBox复选框的实现方法
1. 概述 JCheckBox,复选框. JCheckBox 常用构造方法: // 无文本,默认未选中 JCheckBox() // 有文本,默认未选中 JCheckBox(String text) ...
- html下拉复选框联动,HTML : CheckBox 复选框成组联动(JavaScript)
在页面中,经常需要控制一组 CheckBox 的选中状态,常用的操作有: 1.通过一个或者多个复选框来控制一组 CheckBox 的选中状态. 2.根据一组 CheckBox 的选中状态来决定某些控件 ...
- html判断下选框,javascript怎么判断复选框是否被选中?
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.那么使用javascript怎么判断复选框是否被选中? ...
- html给radio添加图片,使用纯CSS自定义radio(单选框)和checkbox(多选框)的样式
radio和checkbox由于不同的浏览器显示的样式不一致,因此我们需要自定义radio(单选框)和checkbox(多选框)的样式.基本原理就是贱radio和checkbox的自定义样式设置成图片 ...
- JS基础入门篇(四)—this的使用,模拟单选框,选项卡和复选框
1.this的使用 thisjs中的关键字js内部已经定义好了,可以不声明 直接使用 this的指向问题1. 在函数外部使用this指向的是window2. 在函数内部使用有名函数直接调用函数 thi ...
- layui添加复选框_layui table的复选框 重载后增加回显
layui table的复选框 重载后增加回显 找到未压缩的table.js 增加配置 缓存所选中的数据 回显 数据获取 找到未压缩的table.js 我们需要修改table.js文件,但官网下载的是 ...
最新文章
- 随便玩玩之PostgreSQL(第一章)PostgreSQL简介
- Android的Button按钮,ACTION_UP事件不触发解决方案
- FreeRTOS学习及移植笔记之一:开始FreeRTOS之旅
- 漫谈 | “黎曼猜想”和区块链加密算法到底有什么关系?
- css3价格斜切_HTML5+CSS3价格表翻转切换动画
- v-viewer图片打不开一直在刷新_网速很慢甚至打不开?广告弹窗太多了?有效提升网络质量的方法。...
- opencv imshow plt imshow
- Android——适配器其他组件(AutoCompleteTextView:自动完成文本编辑框;Spinner:下拉列表)...
- pyqt 槽任意参数_根据效果及设计参数选择合适的洗墙灯
- java内存溢出模拟_模拟实战排查堆内存溢出(java.lang.OutOfMemoryError: Java heap space)问题...
- logrotate 对某个日志的配置
- 双系统Ubuntu 无 启用wifi选项
- k2路由器linux系统,告别后门:斐讯K2路由器刷入华硕固件
- 算法渐近性质分析_神奇宝贝解释的渐近分析:深入研究复杂性分析
- 计算机输入设备和输出设备怎么区分,输入设备和输出设备的区别
- UE4遇到的各种奇葩问题
- Electron安装报错解决办法
- vue3 打印插件 vue-print-nb
- SCONS编译和使用
- 电子器件系列27:无源蜂鸣片
热门文章
- jQuery打字效果
- 2020安洵杯--MISC
- 2021年西式面点师(初级)考试平台及西式面点师(初级)模拟考试
- 直接将ADB授权写入到手机的方法(手机需要有root权限)
- mysql comment_mysql中的comment用法
- 关于我如何解决了xlsm文件格式的问题
- 函数与Lambda表达式
- 至强CPU型号系列的变化
- 基于SPSS的医疗医保费用数据分析预测(C#)
- c++之 推箱子小游戏