Bootstrap版本

由于Bootstrap 3和Bootstrap 4之间的类名和布局有一些变化，bootstrap-select需要知道您正在使用的Bootstrap的版本。默认情况下，bootstrap-select会自动检测Bootstrap的版本。但是，在某些情况下，版本检测无法正常工作（例如，异步加载Bootstrap或存在命名空间冲突）。目前，如果版本检测失败，bootstrap-select默认使用Bootstrap 3格式化。这将在下一个主要版本中更改。

您可以通过bootstrap-select手动指定Bootstrap的版本Constructor.BootstrapVersion

$.fn.selectpicker.Constructor.BootstrapVersion = '4';

核心选项

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

注意：出于安全原因，无法使用数据属性提供sanitize，sanitizeFn和whiteList选项。

名称	类型	默认值	描述
actionsBox	boolean	`false`	设置为`true`时，在下拉菜单的顶部添加两个按钮（全选和取消全选）。
container	string \| false	`false`	设置为字符串时，将select附加到特定元素或选择器，例如`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`	检查哪个有更多的空间，高于或低于。如果dropup有足够的空间可以正常完全打开，但是上面有更多空间，则dropup仍会正常打开。否则，它变成了一个下降。如果dropupAuto设置为false，则必须手动调用dropup。
header	string	`false`	在页面顶部添加一个标题; 默认包括关闭按钮
hideDisabled	boolean	`false`	从菜单中删除已禁用的选项和optgroups `data-hide-disabled: true`
iconBase	string	`'glyphicon'`	将基数设置为使用不同的图标字体而不是Glyphicons。如果更改iconBase，您可能还想更改`tickIcon`，以防新图标字体使用不同的命名方案。
liveSearch	boolean	`false`	设置为`true`时，会在selectpicker下拉列表的顶部添加一个搜索框。
liveSearchNormalize	boolean	`false`	将liveSearchNormalize设置为`true`允许对重音不敏感的搜索。
liveSearchPlaceholder	string	`null`	设置为字符串时，将将等于字符串的占位符属性添加到liveSearch输入。
liveSearchStyle	string	`'contains'`	设置为`“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'`	多重选择没有选定选项时显示的文本。
noneResultsText	string	`'No results matched {0}'`	搜索未返回任何结果时显示的文本。
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'`	设置为`“auto”`时，菜单始终打开以显示窗口允许的项目数量，而不会被切断。设置为整数时，菜单将显示给定的项目数，即使下拉列表已被切断。设置为`false`时，菜单将始终显示所有项目。
style	string \| null	`Bootstrap 4: 'btn-light'Bootstrap 3: 'btn-default'`	设置为字符串时，将值添加到按钮的样式。
styleBase	string \| null	`'btn'`	应用于按钮的默认类。使用`setStyle`方法时，此类将始终保留。提示：如果要将元素设置为表单控件，请将style设置为`''`，将styleBase设置为`'form-control'`。
tickIcon	string	`'glyphicon-ok'`	设置要用于显示为所选选项旁边的“tick”的图标。
title	string \| null	`null`	selectpicker的默认标题。
virtualScroll	boolean \| integer	`600`	如果启用，下拉列表中的项目将使用虚拟化呈现（即，仅渲染视口内的项目）。这大大提高了具有大量选项的选择的性能。如果select具有至少该数量的选项，则设置为仅使用虚拟化的整数。
width	`'auto'` \| `'fit'` \| css-width \| false (where `css-width` is a CSS width with units, e.g. `100px`)	`false`	设置为`auto`时，会自动调整选择器的宽度以适应最宽的选项。设置为css-width时，selectpicker的宽度将强制内联到给定值。设置为`false`时，将删除所有宽度信息。
windowPadding	integer \| array	`0`	这在窗口具有下拉菜单不应覆盖的区域（例如固定标题）的情况下非常有用。设置为整数时，将向所有边添加相同的填充。或者，可以以`[top，right，bottom，left]`格式使用整数数组。
sanitize	boolean	`true`	启用或禁用清理。如果激活，将对各个选项的`'data-content'`进行清理。
whiteList	object	Default value	包含允许的属性和标记的对象
sanitizeFn	null \| function	`null`	在这里，您可以提供自己的清洁功能。如果您更喜欢使用专用库来执行清理，这可能很有用。

默认设置

您可以通过修改其Constructor.DEFAULTS对象来更改bootstrap-select的默认设置：

$.fn.selectpicker.Constructor.DEFAULTS.multipleSeparator = ' | ';

事件

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

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

事件类型	描述
show.bs.select	调用show实例方法时会立即触发此事件。
shown.bs.select	当下拉菜单对用户可见时（将等待CSS转换完成），将触发此事件。
hide.bs.select	调用hide实例方法时会立即触发此事件。
hidden.bs.select	下拉菜单已完成对用户隐藏时将触发此事件（将等待CSS转换完成）。
loaded.bs.select	select初始化后会触发此事件。
rendered.bs.select	调用渲染实例后将触发此事件。
refreshed.bs.select	调用刷新实例后将触发此事件。
changed.bs.select	更改选择的值后将触发此事件。它经过`event`, `clickedIndex`, `isSelected`, `previousValue`. `previousValue`是更改前的select值。如果通过`.selectpicker（'val'）`，`selectpicker（'selectAll'）`或`.selectpicker（'deselectAll'）`方法更改了select的值，则`clickedIndex`和`isSelected`将为`null`。

$('#mySelect').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
  // do something...
});

Sanitizer

通过各个选项的data-content属性添加的HTML将使用我们的内置清洁程序进行清理。

默认的whiteList值如下：

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i;
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', 'tabindex', 'style', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

如果要向此默认whiteList添加新值，可以执行以下操作：

var myDefaultWhiteList = $.fn.selectpicker.Constructor.DEFAULTS.whiteList;

// To allow table elements
myDefaultWhiteList.table = [];

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option'];

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/;
myDefaultWhiteList['*'].push(myCustomRegex);

如果您想绕过我们的sanitizer，因为您更喜欢使用专用库，则应执行以下操作：

$('#yourSelect').selectpicker({
  sanitizeFn: function (domNodes) {
    return DOMPurify.sanitize(domNodes)
  }
});

出于性能原因，我们的内置清理程序接受一组DOM节点作为其第一个参数，而不是HTML字符串。如果决定使用自己的sanitizeFn，请记住这一点。