BootstrapSelect参数方法

核心选项

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

名称	类型	默认	描述
actionsBox	boolean	false	设置时true，将两个按钮添加到下拉菜单的顶部（全选并全选）。
container	string | false	false	当设置为字符串时，将选择附加到特定的元素或选择器，例如， container: 'body' | '.main-body'
countSelectedText	string | function	function	设置selectedTextFormat为count或时显示的文本格式count > #。{0}是所选的金额。{1}总共可供选择。 当设置为一个功能时，第一个参数是所选择的选项的数量，第二个是选项的总数。该函数必须返回一个字符串。
deselectAllText	string	'Deselect All'	actionsBox启用时，取消选择所有选项的按钮上的文本。
dropdownAlignRight	boolean | 'auto'	false	将菜单对准左侧，而不是左侧。如果设置为'auto'，如果在左侧对齐菜单的全宽没有空间，菜单将自动对齐。
dropupAuto	boolean	true	检查哪个房间有更多的空间，高于或低于。如果下拉菜单有足够的空间可以正常完全打开，但是上面还有更多的空间，则下拉菜单仍然正常打开。否则，它成为一个下拉。如果dropupAuto设置为false，则必须手动调用dropup。
header	string	false	在菜单的顶部添加标题; 默认情况下包括关闭按钮
hideDisabled	boolean	false	从菜单中删除禁用的选项和optgroup data-hide-disabled: true
iconBase	string	'glyphicon'	设置基地使用不同的图标字体，而不是Glyphicons。如果更改iconBase，您可能还需要更改tickIcon，以防新图标字体使用不同的命名方案。
liveSearch	boolean	false	设置时true，将搜索框添加到选择器下拉列表的顶部。
liveSearchNormalize	boolean	false	将liveSearchNormalize设置为true允许对重音不敏感的搜索。
liveSearchPlaceholder	string	null	当设置为字符串时，等于该字符串的占位符属性将添加到liveSearch输入。
liveSearchStyle	string	'contains'	设置时'contains'，搜索将显示包含搜索文本的选项。例如，搜索，返回鸭都为PL PL E，PL嗯，和PL antain。当设置为'startsWith'，寻找PL只会返回PL UM和PL antain。
maxOptions	integer | false	false	当设置为整数并且在多选中时，所选择的选项的数量不能超过给定的值。 此选项也可以作为数据属性存在，在这种情况下，它仅适用于此。
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' （其中x是整数） 'values'

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

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

selectOnTab false

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

showContent boolean true

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

showIcon boolean true

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

showSubtext boolean false

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

showTick boolean false

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

size 'auto'  | integer | false 'auto'

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

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

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

style string | null null

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

tickIcon string 'glyphicon-ok'

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

title string | null null

selectpicker的默认标题。

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

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

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

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

windowPadding integer | array 0

这在窗口具有下拉菜单不能覆盖的区域（例如固定标题）的情况下很有用。当设置为整数时，相同的填充将被添加到所有方面。或者，可以以格式使用整数数组[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');

芥末 番茄酱滋味

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

  Mustard
  Ketchup
  Relish


Remove Mustard
Remove Ketchup
Remove Relish

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