位置: IT常识 - 正文
BootStrap--selectpicker的使用
编辑：rootadmin推荐整理分享BootStrap--selectpicker的使用，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
用过selectpicker的都说好~但是网上中文的教程又找不到比较完整的用法，于是去官网看了下 顺便弄过来翻译一下：
选项可以通过数据属性或JavaScript传递。对于数据属性，附加选项名称data-，如data-style=""或data-selected-text-format="count"
<select id="selectoffice" class="selectpicker" multiple> <option value=' ' name=' ' li_key=' '> values </option> ...</select> $('.selectpicker').selectpicker({ 'selectedText': 'cat', //header: 'Select a condiment', 'noneSelectedText': 'Selected', 'deselectAllText': '全不选', 'selectAllText': '全选', //'actionsBox': true });参数名类型默认值描述actionsBoxboolfalse当设置为true，增加了两个按钮，下拉菜单的顶部（全选和取消全选）。
containerstring|falsefalse当设置为一个字符string，追加选择一个特定的元素或选择器，例如container: 'body' | '.main-body'
countSelectedTextstring| functionfunction设置当selectedTextFormat是显示文本的格式count或count > #。{0}是所选择的量。{1}是用于选择的总可用。
当设定为一个函数，第一个参数是所选择的选项的数目，并且第二个是选项的总数。该函数必须返回一个字符string。
deselectAllTextstring'Deselect All'当取消选择所有选项按钮上的文本actionsBox被启用。
dropdownAlignRightbool |'auto'false对齐菜单，而不是左右。如果设置为'auto'，如果在左对齐没有余地菜单的全宽度的菜单会自动右对齐。
dropupAutobooltrue进行检查以查看其具有更多的空间，上方或下方。如果dropup有足够的空间完全打开正常，但上面有更大的空间，在dropup仍能正常打开。否则，就变成了dropup。如果dropupAuto设置为false，dropups必须手动调用。
headerstringfalse增加了菜单的顶部的头部;默认包含关闭按钮
hideDisabledboolfalse从菜单中删除禁用的选项和optgroupsdata-hide-disabled: true
iconBasestring'glyphicon'将基地使用不同的图标字体代替Glyphicons。如果改变iconBase，你也可能要更改tickIcon，以防新的图标字体使用了不同的命名方案。
liveSearchboolfalse当设置为true，增加了一个搜索框的下拉selectpicker的顶部。
liveSearchNormalizeboolfalse设置liveSearchNormalize以true允许不区分重音的搜索。
liveSearchPlaceholderstringnull当设置为一个字符string，一个占位符属性等于该字符string将被添加到实况搜索输入。
liveSearchStylestring'contains'当设置为'contains'，搜索将显示包含搜索到的文本选项。例如，搜索，返回鸭都为PLPLE，PL嗯，和PLantain。当设置为'startsWith'，寻找PL只会返回PLUM和PLantain。
maxOptionsinteger |falsefalse当设置为一个integer ，并在多选择，所选选项的数量不能超过给定值。
该选项还可以存在作为数据属性为<optgroup>，在这种情况下，它仅适用于<optgroup>。
maxOptionsTextstring| array|functionfunction启用maxOptions时所显示的文本，并为给定的方案选项的最大数量已被选定。
如果使用的功能，它必须返回一个数组。阵列[0]是当maxOptions被施加到整个选择元件使用的文本。阵列[1]是当maxOptions上的OPTGROUP用于使用的文本。如果使用字符string，相同的文字用于元素和OPTGROUP两者。
mobileboolfalse当设置为true，使能选择菜单中的设备的本机菜单。
multipleSeparatorstring', '坐落在分隔所选选项的按钮显示的字符。
noneSelectedTextstring'Nothing selected'当多个选择时所显示的文本没有选择的选择。
selectAllTextstring'Select All'当选择了所有选项，按钮上的文本actionsBox被启用。
selectedTextFormat'values'|'static'|'count'|'count > x'（其中，x是integer ）'values'指定选择如何显示有多个选择。
'values'显示所选择的选项（由分隔的列表multipleSeparator。'static'简单地显示所述选择元件的标题。'count'显示所选选项的总数量。'count > x'行为类似于'values'直到所选选项的数目大于x;在此之后，它的行为象'count'。
selectOnTabboolfalse当设置为true，对待像selectpicker下拉列表中输入或空格字符制表符。
showContentbooltrue当设置为true，显示与该按钮选择的选项（一个或多个）相关联的自定义的HTML。当设置为false，期权价值将被显示。
showIconbooltrue当设置为true，与在按钮选择的选项（一个或多个）相关联的显示的图标（一个或多个）。
showSubtextboolfalse当设置为true与所述按钮选择的选项相关联，显示潜台词。
showTickboolfalseshow（没有的项目上选择的选项勾选multiple属性）。
size'auto'|integer |false'auto'当设置为'auto'，菜单始终打开，以显示尽可能多的项目窗口将允许在没有被切断。
当设置为integer 时，菜单将显示项目的给定数量，即使下拉被切断。
当设置为false，菜单会一直显示所有项目。
stylestring|nullnull当设置为一个字符string，添加值到该按钮的风格。
tickIconstring'glyphicon-ok'设置要使用的图标旁边显示的“滴答”来选择的选项。
titlestring|nullnull对于selectpicker的默认标题。
width'auto'|'fit'|css-width|false（其中css-width是单位CSS的宽度，例如100px）false当设置为auto，所述selectpicker的宽度被自动调节，以适应最宽的选项。
当设置为一个css-宽度，所述selectpicker的宽度内联强制为给定值。
当设置为false，所有宽度信息被删除。
windowPaddinginteger | array0这是在该窗口中有一个下拉菜单中不应该涉及的领域情况下非常有用-例如一个固定的头。当设置为一个integer ，同样填充将被添加到四面八方。可替代地，一个integer 数组可以在格式来使用[top, right, bottom, left]。
原文地址：https://www.cnblogs.com/zjhblogs/p/6667695.html用过selectpicker的都说好~但是网上中文的教程又找不到比较完整的用法，于是去官网看了下 顺便弄过来翻译一下：
选项可以通过数据属性或JavaScript传递。对于数据属性，附加选项名称data-，如data-style=""或data-selected-text-format="count"
<select id="selectoffice" class="selectpicker" multiple> <option value=' ' name=' ' li_key=' '> values </option> ...</select> $('.selectpicker').selectpicker({ 'selectedText': 'cat', //header: 'Select a condiment', 'noneSelectedText': 'Selected', 'deselectAllText': '全不选', 'selectAllText': '全选', //'actionsBox': true });参数名类型默认值描述actionsBoxboolfalse当设置为true，增加了两个按钮，下拉菜单的顶部（全选和取消全选）。
containerstring|falsefalse当设置为一个字符string，追加选择一个特定的元素或选择器，例如container: 'body' | '.main-body'
countSelectedTextstring| functionfunction设置当selectedTextFormat是显示文本的格式count或count > #。{0}是所选择的量。{1}是用于选择的总可用。
当设定为一个函数，第一个参数是所选择的选项的数目，并且第二个是选项的总数。该函数必须返回一个字符string。
deselectAllTextstring'Deselect All'当取消选择所有选项按钮上的文本actionsBox被启用。
dropdownAlignRightbool |'auto'false对齐菜单，而不是左右。如果设置为'auto'，如果在左对齐没有余地菜单的全宽度的菜单会自动右对齐。
dropupAutobooltrue进行检查以查看其具有更多的空间，上方或下方。如果dropup有足够的空间完全打开正常，但上面有更大的空间，在dropup仍能正常打开。否则，就变成了dropup。如果dropupAuto设置为false，dropups必须手动调用。
headerstringfalse增加了菜单的顶部的头部;默认包含关闭按钮
hideDisabledboolfalse从菜单中删除禁用的选项和optgroupsdata-hide-disabled: true
iconBasestring'glyphicon'将基地使用不同的图标字体代替Glyphicons。如果改变iconBase，你也可能要更改tickIcon，以防新的图标字体使用了不同的命名方案。
liveSearchboolfalse当设置为true，增加了一个搜索框的下拉selectpicker的顶部。
liveSearchNormalizeboolfalse设置liveSearchNormalize以true允许不区分重音的搜索。
liveSearchPlaceholderstringnull当设置为一个字符string，一个占位符属性等于该字符string将被添加到实况搜索输入。
liveSearchStylestring'contains'当设置为'contains'，搜索将显示包含搜索到的文本选项。例如，搜索，返回鸭都为PLPLE，PL嗯，和PLantain。当设置为'startsWith'，寻找PL只会返回PLUM和PLantain。
maxOptionsinteger |falsefalse当设置为一个integer ，并在多选择，所选选项的数量不能超过给定值。
该选项还可以存在作为数据属性为<optgroup>，在这种情况下，它仅适用于<optgroup>。
maxOptionsTextstring| array|functionfunction启用maxOptions时所显示的文本，并为给定的方案选项的最大数量已被选定。
如果使用的功能，它必须返回一个数组。阵列[0]是当maxOptions被施加到整个选择元件使用的文本。阵列[1]是当maxOptions上的OPTGROUP用于使用的文本。如果使用字符string，相同的文字用于元素和OPTGROUP两者。
mobileboolfalse当设置为true，使能选择菜单中的设备的本机菜单。
multipleSeparatorstring', '坐落在分隔所选选项的按钮显示的字符。
noneSelectedTextstring'Nothing selected'当多个选择时所显示的文本没有选择的选择。
selectAllTextstring'Select All'当选择了所有选项，按钮上的文本actionsBox被启用。
selectedTextFormat'values'|'static'|'count'|'count > x'（其中，x是integer ）'values'指定选择如何显示有多个选择。
'values'显示所选择的选项（由分隔的列表multipleSeparator。'static'简单地显示所述选择元件的标题。'count'显示所选选项的总数量。'count > x'行为类似于'values'直到所选选项的数目大于x;在此之后，它的行为象'count'。
selectOnTabboolfalse当设置为true，对待像selectpicker下拉列表中输入或空格字符制表符。
showContentbooltrue当设置为true，显示与该按钮选择的选项（一个或多个）相关联的自定义的HTML。当设置为false，期权价值将被显示。
showIconbooltrue当设置为true，与在按钮选择的选项（一个或多个）相关联的显示的图标（一个或多个）。
showSubtextboolfalse当设置为true与所述按钮选择的选项相关联，显示潜台词。
showTickboolfalseshow（没有的项目上选择的选项勾选multiple属性）。
size'auto'|integer |false'auto'当设置为'auto'，菜单始终打开，以显示尽可能多的项目窗口将允许在没有被切断。
当设置为integer 时，菜单将显示项目的给定数量，即使下拉被切断。
当设置为false，菜单会一直显示所有项目。
stylestring|nullnull当设置为一个字符string，添加值到该按钮的风格。
tickIconstring'glyphicon-ok'设置要使用的图标旁边显示的“滴答”来选择的选项。
titlestring|nullnull对于selectpicker的默认标题。
width'auto'|'fit'|css-width|false（其中css-width是单位CSS的宽度，例如100px）false当设置为auto，所述selectpicker的宽度被自动调节，以适应最宽的选项。
当设置为一个css-宽度，所述selectpicker的宽度内联强制为给定值。
当设置为false，所有宽度信息被删除。
windowPaddinginteger | array0这是在该窗口中有一个下拉菜单中不应该涉及的领域情况下非常有用-例如一个固定的头。当设置为一个integer ，同样填充将被添加到四面八方。可替代地，一个integer 数组可以在格式来使用[top, right, bottom, left]。
上一篇：帝国cms7.5快速建站的方法(帝国cms建站实例教程)
下一篇：如何使用python中numpy.append()方法的axis(pythonjam怎么用)
