BootstrapSelect参数方法

核心选项

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

boolean

名称	类型	默认	描述
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	当设置为整数并且在多选中时，所选择的选项的数量不能超过给定的值。 此选项也可以作为数据属性存在<optgroup>，在这种情况下，它仅适用于此<optgroup>。
maxOptionsText	string | array | function	function	启用maxOptions时显示的文本以及给定方案的最大选项数已被选择。 如果使用一个函数，它必须返回一个数组。array [0]是将maxOptions应用于整个select元素时使用的文本。array [1]是在optgroup上使用maxOptions时使用的文本。如果使用字符串，元素和optgroup都使用相同的文本。
mobile		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');

       芥末

        番茄酱

       滋味

     

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

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