BootStrap--selectpicker的使用
用过selectpicker的都说好~但是网上中文的教程又找不到比较完整的用法,于是去官网看了下 顺便弄过来翻译一下:
选项可以通过数据属性或JavaScript传递。对于数据属性,附加选项名称data-
,如 data-style=""
或data-selected-text-format="count"
<select id="selectoffice" class="selectpicker" multiple>
<option value=' ' name=' ' li_key=' '> values </option>
...
</select>
$('.selectpicker').selectpicker({
'selectedText': 'cat',
//header: 'Select a condiment',
'noneSelectedText': 'Selected',
'deselectAllText': '全不选',
'selectAllText': '全选',
//'actionsBox': true
});
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
actionsBox | bool | false |
当设置为 |
container | string| false | false |
当设置为一个字符string,追加选择一个特定的元素或选择器,例如 |
countSelectedText | string| function | function |
设置当selectedTextFormat是显示文本的格式 当设定为一个函数,第一个参数是所选择的选项的数目,并且第二个是选项的总数。该函数必须返回一个字符string。 |
deselectAllText | string | 'Deselect All' |
当取消选择所有选项按钮上的文本 |
dropdownAlignRight | bool | 'auto' |
false |
对齐菜单,而不是左右。如果设置为 |
dropupAuto | bool | true |
进行检查以查看其具有更多的空间,上方或下方。如果dropup有足够的空间完全打开正常,但上面有更大的空间,在dropup仍能正常打开。否则,就变成了dropup。如果dropupAuto设置为false,dropups必须手动调用。 |
header | string | false |
增加了菜单的顶部的头部; 默认包含关闭按钮 |
hideDisabled | bool | false |
从菜单中删除禁用的选项和optgroups |
iconBase | string | 'glyphicon' |
将基地使用不同的图标字体代替Glyphicons。如果改变iconBase,你也可能要更改 |
liveSearch | bool | false |
当设置为 |
liveSearchNormalize | bool | false |
设置liveSearchNormalize以 |
liveSearchPlaceholder | string | null |
当设置为一个字符string,一个占位符属性等于该字符string将被添加到实况搜索输入。 |
liveSearchStyle | string | 'contains' |
当设置为 |
maxOptions | integer | false | false |
当设置为一个integer ,并在多选择,所选选项的数量不能超过给定值。 该选项还可以存在作为数据属性为 |
maxOptionsText | string| array | function | function |
启用maxOptions时所显示的文本,并为给定的方案选项的最大数量已被选定。 如果使用的功能,它必须返回一个数组。阵列[0]是当maxOptions被施加到整个选择元件使用的文本。阵列[1]是当maxOptions上的OPTGROUP用于使用的文本。如果使用字符string,相同的文字用于元素和OPTGROUP两者。 |
mobile | bool | false |
当设置为 |
multipleSeparator | string | ', ' |
坐落在分隔所选选项的按钮显示的字符。 |
noneSelectedText | string | 'Nothing selected' |
当多个选择时所显示的文本没有选择的选择。 |
selectAllText | string | 'Select All' |
当选择了所有选项,按钮上的文本 |
selectedTextFormat | 'values' | 'static' | 'count' | 'count > x' (其中,x是integer ) |
'values' |
指定选择如何显示有多个选择。
|
selectOnTab | bool | false |
当设置为 |
showContent | bool | true |
当设置为 |
showIcon | bool | true |
当设置为 |
showSubtext | bool | false |
当设置为 |
showTick | bool | false |
show(没有的项目上选择的选项勾选 |
size | 'auto' | integer | false |
'auto' |
当设置为 当设置为integer 时,菜单将显示项目的给定数量,即使下拉被切断。 当设置为 |
style | string| null | null |
当设置为一个字符string,添加值到该按钮的风格。 |
tickIcon | string | 'glyphicon-ok' |
设置要使用的图标旁边显示的“滴答”来选择的选项。 |
title | string| null | null |
对于selectpicker的默认标题。 |
width | 'auto' | 'fit' | css-width| false(其中css-width 是单位CSS的宽度,例如100px ) |
false |
当设置为 当设置为一个css-宽度,所述selectpicker的宽度内联强制为给定值。 当设置为 |
windowPadding | integer | array | 0 |
这是在该窗口中有一个下拉菜单中不应该涉及的领域情况下非常有用-例如一个固定的头。当设置为一个integer ,同样填充将被添加到四面八方。可替代地,一个integer 数组可以在格式来使用 |
原文地址:https://www.cnblogs.com/zjhblogs/p/6667695.html
BootStrap--selectpicker的使用的更多相关文章
- bootstrap selectpicker
mark 一下使用 bootstrap selectpicker 遇到的一个小issue,作为下次查错使用 $('.selectpicker').selectpicker('val', 'Mustar ...
- bootstrap selectpicker 通过代码指定选中值 BootStrap selectpicker后台动态绑定数据 selectpicker 获取选中option的属性或者值
bootstrap-select使用 bootstrap selectpicker 通过代码指定选中值 $('#subjectno').selectpicker('val',(row.subjectn ...
- 解决bootStrap selectpicker 下拉栏上方弹出
最近项目中遇到了一个使用bootStrap selectpicker 进行下拉栏展示的时候出现在元素上方弹出展示的问题,可把我难受坏了,和测试互怼最终以失败告终(人家还是一个娇滴滴的小姑娘),在查了a ...
- BootStrap selectpicker后台动态绑定数据
项目使用BootStrap设置select时,不能动态加载,使用以下方法可以解决. //获得全部订单信息(订单ID,订单名称) function GetAllOrders(obj) { $.ajax( ...
- 基于bootstrap selectpicker ,实现select下拉框模糊查询功能
1.html代码块 需要引入bootstrap的css js jquery bootstrap.css bootstrap-select.min.css jquery-1.11.3.min.js bo ...
- bootstrap selectpicker控件select下拉框动态数据无法回显的问题
有关于selectpicker下拉框数据回显的问题,当查看一个对象的属性的时候, 发现有关于selectpicker的下拉框并没有将返回的数据进行回显,显示的都是请选择, 经查证,当查看属性的时候,他 ...
- bootstrap selectpicker使用问题
文档查阅:http://silviomoreto.github.io/bootstrap-select/options/ 1.实用属性 size:5 表示下拉列表默认展示5行(ie8展示4.5行) ...
- Bootstrap selectpicker 下拉框多选获取选中value和多选获取文本值
1.页面代码: 页面引入: bootstrap-select.min.css和 bootstrap-select.min.js. defaults-zh_CN.min.js文件,并初始化下拉选项框. ...
- Bootstrap selectpicker 强制向下
selectpicker的方向是自适应的,但是有些界面,我们需要强制向下,可以使用属性data-dropup-auto data-dropup-auto="false" 官网上的o ...
- 一个坑,bootstrap selectpicker 重置下拉列表时遇到的问题
需求是这样的:点击右侧三个按钮中的任意一个,如果执行成功,左侧的版本信息就需要重新获取列表.挺简单的需求,但是遇到了一个坑, 在使用$('#id').html('')清空下拉选项并且重新赋值的时候,始 ...
随机推荐
- Vue 下拉框值变动事件传多个参数
在使用 Vue 进行开发时,下拉框值变动事件 @change 是很常用的. 其传参一般分为两种方式:默认传参和自定义传参. 默认传参 @change 默认会传选中项标识的参数,在传参处不用定义,在方法 ...
- JavaScript 基础知识(二):闭包
首先来思考一下下面的案例: function unclosure() { let count = 0 return count++ } for (let index = 0; index < 1 ...
- 论文翻译:2021_A New Real-Time Noise Suppression Algorithm for Far-Field Speech Communication Based on Recurrent Neural Network
论文地址:一种新的基于循环神经网络的远场语音通信实时噪声抑制算法 引用格式:Chen B, Zhou Y, Ma Y, et al. A New Real-Time Noise Suppression ...
- day27--Java集合10
Java集合10 21.集合家庭作业 21.1Homework01 按要求实现: 封装一个新闻类,包括标题和内容属性,提供get.set方法,重写toString方法,打印对象时只打印标题: 只提供一 ...
- KingbaseES V8R3 集群专用机网关失败分析案例
KingbaseES R3集群网关检测工作机制: 1.Cluster下watchdog进程在固定间隔时间,通过ping 网关地址监控链路的连通性,如果连通网关地址失败,则修改cluster sta ...
- Spring_事务总结
Spring 事务总结 rollbackFor 设为 Exception.class场景下 如果在函数内部catch住异常消费掉,没有再抛出的话,不会回滚 如果catch住 然后原封不动抛出,会回滚 ...
- Java---Stream入门
由于本文需要有一定的Lambda基础,所以如果不懂什么是Lambda的同学请移步:Java---Lambda 学习Stream的目的 函数式编程渐渐变成主流,而Stream是函数式编程的重点. 相对于 ...
- 2021年3月-第01阶段-Linux基础-Linux系统的启动流程
Linux系统的启动流程 理解Linux操作系统启动流程,能有助于后期在企业中更好的维护Linux服务器,能快速定位系统问题,进而解决问题. 上图为Linux操作系统启动流程 1.加载BIOS 计算机 ...
- 学习完nio的一个小笔记吧
这是一个nio网络通信服务端的demo,主要就学习了selector的一些用法,以及它里面的事件类型 selector是对nio的一个优化,它能保证既能高效处理线程中的事件,又能保证线程不会一直占用c ...
- LINUX 新增的磁盘不建立分区,直接建立文件系统并挂载
假设新硬盘是 /dev/sdc fdisk操作的是/dev/sdc ,分区后才会有/dev/sdc1 /dev/sdc2 之类 一般mkfs.ext4 /dev/sdc1 来格式化一个分区,再moun ...