BootstrapSelect参数方法

核心选项

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

名称类型默认描述actionsBoxbooleanfalse

设置时true，将两个按钮添加到下拉菜单的顶部（全选并全选）。

containerstring | falsefalse

当设置为字符串时，将选择附加到特定的元素或选择器，例如， container: 'body' | '.main-body'

countSelectedTextstring | functionfunction

设置selectedTextFormat为count或时显示的文本格式count > #。{0}是所选的金额。{1}总共可供选择。

当设置为一个功能时，第一个参数是所选择的选项的数量，第二个是选项的总数。该函数必须返回一个字符串。

deselectAllTextstring'Deselect All'

actionsBox启用时，取消选择所有选项的按钮上的文本。

dropdownAlignRightboolean | 'auto'false

将菜单对准左侧，而不是左侧。如果设置为'auto'，如果在左侧对齐菜单的全宽没有空间，菜单将自动对齐。

dropupAutobooleantrue

检查哪个房间有更多的空间，高于或低于。如果下拉菜单有足够的空间可以正常完全打开，但是上面还有更多的空间，则下拉菜单仍然正常打开。否则，它成为一个下拉。如果dropupAuto设置为false，则必须手动调用dropup。

headerstringfalse

在菜单的顶部添加标题; 默认情况下包括关闭按钮

hideDisabledbooleanfalse

从菜单中删除禁用的选项和optgroup data-hide-disabled: true

iconBasestring'glyphicon'

设置基地使用不同的图标字体，而不是Glyphicons。如果更改iconBase，您可能还需要更改tickIcon，以防新图标字体使用不同的命名方案。

liveSearchbooleanfalse

设置时true，将搜索框添加到选择器下拉列表的顶部。

liveSearchNormalizebooleanfalse

将liveSearchNormalize设置为true允许对重音不敏感的搜索。

liveSearchPlaceholderstringnull

当设置为字符串时，等于该字符串的占位符属性将添加到liveSearch输入。

liveSearchStylestring'contains'

设置时'contains'，搜索将显示包含搜索文本的选项。例如，搜索，返回鸭都为PL PL E，PL嗯，和PL antain。当设置为'startsWith'，寻找PL只会返回PL UM和PL antain。

maxOptionsinteger | falsefalse

当设置为整数并且在多选中时，所选择的选项的数量不能超过给定的值。

此选项也可以作为数据属性存在<optgroup>，在这种情况下，它仅适用于此<optgroup>。

maxOptionsTextstring | array | functionfunction

启用maxOptions时显示的文本以及给定方案的最大选项数已被选择。

如果使用一个函数，它必须返回一个数组。array [0]是将maxOptions应用于整个select元素时使用的文本。array [1]是在optgroup上使用maxOptions时使用的文本。如果使用字符串，元素和optgroup都使用相同的文本。

mobilebooleanfalse

设置时true，启用设备的本机菜单以进行选择菜单。

multipleSeparatorstring', '

设置按钮中显示的字符，分隔所选择的选项。

noneSelectedTextstring'Nothing selected'

当多重选择没有选定选项时显示的文本。

selectAllTextstring'Select All'

actionsBox启用时选择所有选项的按钮上的文本。

selectedTextFormat'values'| 'static'| 'count'| 'count > x'（其中x是整数）'values'

指定如何使用多重选择显示选择。

'values'显示所选择的选项（由分隔的列表multipleSeparator。'static'简单地显示所述选择元件的标题。'count'显示所选选项的总数量。'count > x'行为类似于'values'直到所选选项的数目大于x;在此之后，它的行为象'count'。

selectOnTabfalse

设置时true，可以将选项卡字符与selectpicker下拉列表中的输入或空格字符对等。

showContentbooleantrue

设置时true，在按钮中显示与选定选项相关联的自定义HTML。设置时false，将显示选项值。

showIconbooleantrue

设置时true，显示与按钮中所选选项相关联的图标。

showSubtextbooleanfalse

设置时true，在按钮中显示与选定选项关联的子文字。

showTickbooleanfalse

在选定的选项上显示复选标记（对于没有multiple属性的项目）。

size'auto' | integer | false'auto'

设置时'auto'，菜单总是打开，以显示尽可能多的项目，窗口将允许而不被切断。

当设置为整数时，菜单将显示给定数量的项目，即使下拉菜单被切断。

设置时false，菜单将始终显示所有项目。

stylestring | nullnull

当设置为字符串时，将值添加到按钮的样式。

tickIconstring'glyphicon-ok'

设置显示为所选选项旁边的“勾选”的图标。

titlestring | nullnull

selectpicker的默认标题。

width'auto'| 'fit'| css-width | false（其中css-width是单位的CSS宽度，例如100px）false

设置时auto，selectpicker的宽度会自动调整以适应最宽的选项。

当设置为css-width时，selectpicker的宽度被强制内嵌到给定的值。

当设置为false，所有宽度信息被删除。

windowPaddinginteger | array0

这在窗口具有下拉菜单不能覆盖的区域（例如固定标题）的情况下很有用。当设置为整数时，相同的填充将被添加到所有方面。或者，可以以格式使用整数数组[top, right, bottom, left]。

事件

Bootstrap-select将一些事件用于挂接到选择功能中。

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

事件类型描述show.bs.select当调用show instance方法时，此事件会立即触发。shown.bs.select当下拉菜单对用户可见时，会触发此事件（将等待CSS转换完成）​​。hide.bs.select当调用隐藏实例方法时，会立即触发此事件。hidden.bs.select当下拉菜单从用户隐藏完毕时，会触发此事件（将等待CSS转换完成）​​。loaded.bs.select选择初始化后触发此事件。rendered.bs.select在调用render实例之后触发此事件。refreshed.bs.select刷新实例被调用后触发此事件。changed.bs.select此选项的值已更改后触发此事件。它通过事件，clickedIndex，newValue，oldValue。

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

方法

• .selectpicker('val')
• .selectpicker('selectAll')
• .selectpicker('deselectAll')
• .selectpicker('render')
• .selectpicker('mobile')
• .selectpicker('setStyle')
• .selectpicker('refresh')
• .selectpicker('toggle')
• .selectpicker('hide')
• .selectpicker('show')
• .selectpicker('destroy')

.selectpicker('val')

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

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

这不同于val()直接在select元素上调用。如果val()直接调用元素，引导选择ui将不会刷新（因为更改事件只从用户交互触发）。你必须自己调用ui刷新方法。

$('.selectpicker').val('Mustard');$('.selectpicker').selectpicker('render');// this is the equivalent of the above$('.selectpicker').selectpicker('val', 'Mustard');

---

.selectpicker('selectAll')

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

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

---

.selectpicker('deselectAll')

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

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

---

.selectpicker('render')

您可以强制使用该render方法重新渲染引导选择ui 。如果您以编程方式更改影响元素布局的底层值，这将非常有用。

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

---

.selectpicker('mobile')

通过呼叫启用移动滚动$('.selectpicker').selectpicker('mobile')。这将启用设备的本机菜单以进行选择菜单。

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

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

---

.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');

---

.selectpicker('refresh')

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

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

       芥末       番茄酱       滋味     

取出芥末 取出番茄酱 取消放宽

<select class="selectpicker remove-example">  <option value="Mustard">Mustard</option>  <option value="Ketchup">Ketchup</option>  <option value="Relish">Relish</option></select><button class="btn btn-warning rm-mustard">Remove Mustard</button><button class="btn btn-danger rm-ketchup">Remove Ketchup</button><button class="btn btn-success rm-relish">Remove Relish</button>

$('.rm-mustard').click(function () {  $('.remove-example').find('[value=Mustard]').remove();  $('.remove-example').selectpicker('refresh');});

       芥末       番茄酱       滋味     

禁用 启用

$('.ex-disable').click(function () {  $('.disable-example').prop('disabled', true);  $('.disable-example').selectpicker('refresh');});$('.ex-enable').click(function () {  $('.disable-example').prop('disabled', false);  $('.disable-example').selectpicker('refresh');});

---

.selectpicker('toggle')

以编程方式切换引导选择菜单的打开/关闭。

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

---

.selectpicker('hide')

以编程方式隐藏引导选择使用hide方法（这仅影响引导选项本身的可见性）。

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

---

.selectpicker('show')

以编程方式显示引导选择使用show方法（这仅影响引导选项本身的可见性）。

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

---

.selectpicker('destroy')

要以编程方式销毁引导选择，请使用该destroy方法。

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