一、Core options

选项可以通过数据属性或JavaScript传递。对于数据属性，将选项名称附加到data-，如data-style =“”或data-selected-text-format =“count”。

Name	Type	Default	Description
actionsBox	boolean	`false`	设置为true时，在下拉菜单顶部添加两个按钮 (Select All & Deselect All).
container	string \| false	`false`	设置为字符串时，将select附加到特定元素或选择器，e.g., `container: 'body' \| '.main-body'`
countSelectedText	string \| function	`function`	设置selectedTextFormat为count或count>＃时显示的文本格式。 {0}是选定的金额。 {1}总数可供选择。设置为函数时，第一个参数是所选选项的数量，第二个参数是选项的总数。该函数必须返回一个字符串。
deselectAllText	string	`'Deselect All'`	启用actionsBox时取消选择所有选项的按钮上的文本。
dropdownAlignRight	boolean \| `'auto'`	`false`	将菜单对齐而不是左对齐。如果设置为“自动”，如果在向左对齐时菜单的全宽度没有空间，菜单将自动对齐。
dropupAuto	boolean	`true`	检查哪个有更多的空间，上面或下面。如果dropup有足够的空间可以正常完全打开，但是上面有更多空间，则dropup仍会正常打开。否则，它变成了一个下降。如果dropupAuto设置为false，则必须手动调用dropup。
header	string	`false`	在页面顶部添加一个标题; 默认包括关闭按钮
hideDisabled	boolean	`false`	从菜单data-hide-disabled中删除已禁用的选项和optgroup：true
iconBase	string	`'glyphicon'`	将基数设置为使用不同的图标字体而不是Glyphicons。如果更改iconBase，您可能还想更改tickIcon，以防新图标字体使用不同的命名方案。
liveSearch	boolean	`false`	设置为true时，将搜索框添加到selectpicker下拉列表的顶部。
liveSearchNormalize	boolean	`false`	将liveSearchNormalize设置为true允许对重音不敏感的搜索。
liveSearchPlaceholder	string	`null`	设置为字符串时，将等于字符串的占位符属性添加到liveSearch输入。
liveSearchStyle	string	`'contains'`	设置为“包含”时，搜索将显示包含搜索文本的选项。例如，搜索pl，同时返回Apple，Plum和Plantain。当设置为'startsWith'时，搜索pl将仅返回Plum和Plantain。
maxOptions	integer \| false	`false`	设置为整数并进行多选时，所选选项的数量不能超过给定值。此选项也可以作为<optgroup>的数据属性存在，在这种情况下，它仅适用于<optgroup>。
maxOptionsText	string \| array \| function	`function`	启用maxOptions时显示的文本以及已选择给定方案的最大选项数。如果使用函数，则必须返回一个数组。 array [0]是maxOptions应用于整个select元素时使用的文本。 array [1]是在optgroup上使用maxOptions时使用的文本。如果使用字符串，则元素和optgroup使用相同的文本。
mobile	boolean	`false`	设置为true时，启用设备的选择菜单的本机菜单。
multipleSeparator	string	`', '`	设置分隔所选选项的按钮中显示的字符。
noneSelectedText	string	`'Nothing selected'`	多重选择没有选定选项时显示的文本。
selectAllText	string	`'Select All'`	启用actionsBox时选择所有选项的按钮上的文本。
selectedTextFormat	`'values'` \| `'static'` \| `'count'` \| `'count > x'`(where x is an integer)	`'values'`	指定如何使用多重选择显示选择。 'values'显示所选选项的列表（由multipleSeparator分隔.'static'只显示select元素的标题.'count'显示所选选项的总数.'count> x'的行为类似于'values'，直到数量为选定的选项大于x;之后，它的行为类似于'count'。
selectOnTab	boolean	`false`	设置为true时，将制表符视为selectpicker下拉列表中的输入或空格字符。
showContent	boolean	`true`	设置为true时，显示与按钮中所选选项关联的自定义HTML。设置为false时，将显示选项值。
showIcon	boolean	`true`	设置为true时，显示与按钮中所选选项关联的图标。
showSubtext	boolean	`false`	设置为true时，显示与按钮中选定选项关联的子文本。
showTick	boolean	`false`	显示所选选项的选中标记（对于没有多个属性的项目）。
size	`'auto'` \| integer \| false	`'auto'`	设置为“自动”时，菜单始终打开以显示窗口允许的多个项目而不会被切断。设置为整数时，菜单将显示给定的项目数，即使下拉列表已被切断。设置为false时，菜单将始终显示所有项目。
style	string \| null	`null`	设置为字符串时，将值添加到按钮的样式。
tickIcon	string	`'glyphicon-ok'`	设置要用于显示为所选选项旁边的“勾号”的图标。
title	string \| null	`null`	selectpicker的默认标题。
width	`'auto'` \| `'fit'` \| css-width \| false (where `css-width` is a CSS width with units, e.g. `100px`)	`false`	设置为auto时，会自动调整selectpicker的宽度以适应最宽的选项。设置为css-width时，selectpicker的宽度将强制内联到给定值。设置为false时，将删除所有宽度信息。
windowPadding	integer \| array	`0`	这在窗口具有下拉菜单不应覆盖的区域（例如固定标题）的情况下非常有用。设置为整数时，将向所有边添加相同的填充。或者，可以以[top，right，bottom，left]格式使用整数数组。

二、Events

Bootstrap-select公开了一些事件以挂钩到select功能。

hide.bs.select，hidden.bs.select，show.bs.select和shown.bs.select都有一个relatedTarget属性，其值是切换的锚元素。

Event Type	Description
show.bs.select	调用show实例方法时会立即触发此事件。
shown.bs.select	当下拉列表对用户可见时将触发此事件（将等待CSS转换完成）。
hide.bs.select	调用hide实例方法时会立即触发此事件。
hidden.bs.select	下拉菜单已完成对用户隐藏时将触发此事件（将等待CSS转换完成）。
loaded.bs.select	初始化选择后将触发此事件。
rendered.bs.select	调用渲染实例后，将触发此事件。
refreshed.bs.select	调用刷新实例后将触发此事件。
changed.bs.select	更改选择的值后将触发此事件。它通过事件，clickedIndex，newValue，oldValue。

$('#mySelect').on('hidden.bs.select', function (e) {// do something...
});

三、Methods

与bootstrap-select的接口。

1、 .selectpicker('val')

您可以通过调用元素上的val方法来设置所选值。

$('.selectpicker').selectpicker('val', 'Mustard');
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);

这与直接在select元素上调用val（）不同。如果直接在元素上调用val（），则bootstrap-select ui将不会刷新（因为更改事件仅从用户交互触发）。您必须自己调用ui刷新方法。

$('.selectpicker').val('Mustard');
$('.selectpicker').selectpicker('render');// 这相当于上述内容
$('.selectpicker').selectpicker('val', 'Mustard');

2、 .selectpicker('selectAll')

这将选择多选中的所有项目。

$('.selectpicker').selectpicker('selectAll');

3、 .selectpicker('deselectAll')

取消选择中的所有项目

$('.selectpicker').selectpicker('deselectAll');

4、 .selectpicker('render')

您可以使用render方法强制重新呈现bootstrap-select ui。如果以编程方式更改影响元素布局的任何基础值，则此选项非常有用。

$('.selectpicker').selectpicker('render');

5、 .lectpicker('mobile')

通过调用$（'.selectpicker'）启用移动滚动.selectpicker（'mobile'）。这将启用设备的选择菜单的本机菜单。

用于检测浏览器的方法由用户决定。

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {$('.selectpicker').selectpicker('mobile');
}

6、 .selectpicker('setStyle')

修改与按钮本身或其容器关联的类。

如果更改容器上的类：

$('.selectpicker').addClass('col-lg-12').selectpicker('setStyle');

如果更改按钮上的类（更改数据样式）：

// Replace Class
$('.selectpicker').selectpicker('setStyle', 'btn-danger');// Add Class
$('.selectpicker').selectpicker('setStyle', 'btn-large', 'add');// Remove Class
$('.selectpicker').selectpicker('setStyle', 'btn-large', 'remove');

7、 .selectpicker('refresh')

要以编程方式使用JavaScript更新选择，请先操作select，然后使用refresh方法更新UI以匹配新状态。在删除或添加选项时，或通过JavaScript禁用/启用选择时，这是必需的。

$('.selectpicker').selectpicker('refresh');

8、 .selectpicker('toggle')

以编程方式切换bootstrap-select菜单打开/关闭。

$('.selectpicker').selectpicker('toggle');

9、 .selectpicker('hide')

要以编程方式隐藏bootstrap-select，请使用hide方法（这仅影响bootstrap-select本身的可见性）。

$('.selectpicker').selectpicker('hide');

10、 .selectpicker('show')

要以编程方式显示bootstrap-select，请使用show方法（这仅影响bootstrap-select本身的可见性）。

$('.selectpicker').selectpicker('show');

11、 .selectpicker('destroy')

要以编程方式销毁bootstrap-select，请使用destroy方法。

$('.selectpicker').selectpicker('destroy');

官方案例：http://silviomoreto.github.io/bootstrap-select/examples/

bootstrap select API相关推荐

bootstrap select 插件两级联动
2019独角兽企业重金招聘Python工程师标准>>> bootstrap select 插件两级联动插件地址:http://silviomoreto.github.io/boot ...
bootstrap select下拉框模糊搜索和动态绑定数据解决方法
bootstrap select下拉框模糊搜索和动态绑定数据解决方法参考文章: (1)bootstrap select下拉框模糊搜索和动态绑定数据解决方法 (2)https://www.cnblog ...
Bootstrap Table API 中文版（完整翻译文档）
/* * *$('#table').bootstrapTable({}); *看网上有中文版的,但有些就是字面直接译过来了,而且有的就没有翻译,那就打算自己再翻译一遍,每一条会尽 *最大可能结合尽可能 ...
Bootstrap Table API 中文版（完整翻译文档）~！
/* * *$('#table').bootstrapTable({}); *看网上有中文版的,但有些就是字面直接译过来了,而且有的就没有翻译,那就打算自己再翻译一遍,每一条会尽 *最大可能结合尽可能 ...
Bootstrap Table API 中文版(转载以备自己不时之需)
转载地址:https://blog.csdn.net/S_clifftop/article/details/77937356 感谢感谢 /* * *$('#table').bootstrapTable ...
bootstrap select多选的change事件
bootstrap select的插件多选会自己生成新的DOM,所以绑定在原来select上的change事件不会触发. //bootstrap select插件多选的change事件 $('#fc_ ...
bootstrap Table API和一些简单使用方法
官网: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 后端分页问题:后端返回"rows"."& ...
bootstrap select 用法
我们要做的功能是点击下拉显示搜索框和数据,搜索框内输入关键字可以匹配数据内容,并可以多选实现效果如下首先引入jquery和bootstrap <link rel="stylesh ...
Bootstrap select 多选并获取选中的值
QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票效果图: 输出日志代码: <!DOCTYPE html> <html><h ...

bootstrap select API

一、Core options

二、Events

三、Methods

bootstrap select API相关推荐

最新文章

热门文章