boostrap selectpicker 用法

最近在用boostrap，记录一下bootstrap中selectpicker下拉框使用方法实例

选项可以通过数据属性或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	在这里，您可以提供自己的清洁功能。 如果您更喜欢使用专用库来执行清理，这可能很有用。

例如：

<label for="operator"></label>
<select  id="operator"  name="hidden-operator[]" data-tick-icon="glyphicon-ok" data-select-all-text="全选" data-deselect-all-text="取消全选" data-live-search-placeholder="搜索" data-actions-box="true" title="全部操作员" class="selectpicker bla bli" multiple data-live-search="true">
    <?php foreach($cashiers as $k => $v):?>
    <option value="<?php echo $v['key']; ?>" <?php if (in_array($v['key'], $cashierIds)) echo 'selected'; ?>><?php echo $v['value']; ?></option>
    <?php endforeach;?>
</select>

样式如下：