bootstrap selectpicker的一些笔记

最新推荐文章于 2024-07-20 15:49:14 发布

yagami123551

最新推荐文章于 2024-07-20 15:49:14 发布

阅读量1w

点赞数

分类专栏： bootstrap selectpicker

本文链接：https://blog.csdn.net/yagami123551/article/details/79105224

版权

bootstrap 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

selectpicker

1 篇文章 0 订阅

订阅专栏

关于方法：

`.selectpicker('val')`

您可以通过调用val元素上的方法来设置所选值。

 
    
         $( 
         '.selectpicker' 
         ).selectpicker( 
         'val' 
         ,  
         'Mustard' 
         ); 
        
 
         $( 
         '.selectpicker' 
         ).selectpicker( 
         'val' 
         , [ 
         'Mustard' 
         , 
         'Relish' 
         ]);　 
        
 
  

这不同于val()直接在select元素上调用。如果val()直接调用元素， bootstrap-select ui将不会刷新（因为只从用户交互时触发事件）。你必须自己调用ui刷新方法。

 
         $( 
         '.selectpicker' 
         ).val( 
         'Mustard' 
         ); 
        
         $( 
         '.selectpicker' 
         ).selectpicker( 
         'render' 
         ); 
        
         // this is the equivalent of the above 
        
         $( 
         '.selectpicker' 
         ).selectpicker( 
         'val' 
         ,  
         'Mustard' 
         );

`.selectpicker('selectAll')`

这将选择在multi-select模式下的所有选项。

 
         $( 
         '.selectpicker' 
         ).selectpicker( 
         'selectAll' 
         );

`.selectpicker('deselectAll')`

这将取消选择在multi-select模式下的所有选项。

 
         $( 
         '.selectpicker' 
         ).selectpicker( 
         'deselectAll' 
         );

`.selectpicker('render')`

您可以强制使用该render方法重新渲染bootstrap-select 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')`

以编程方式切换bootstrap-select菜单的打开/关闭。

 
         $( 
         '.selectpicker' 
         ).selectpicker( 
         'toggle' 
         );

`.selectpicker('hide')`

以编程方式隐藏bootstrap-select使用hide方法（这仅影响bootstrap-select自身的可见性）。

 
         $( 
         '.selectpicker' 
         ).selectpicker( 
         'hide' 
         );

`.selectpicker('show')`

以编程方式显示bootstrap-select使用show方法（这仅影响引导选项本身的可见性）。

 
         $( 
         '.selectpicker' 
         ).selectpicker( 
         'show' 
         );

`.selectpicker('destroy')`

要以编程方式销毁bootstrap-select，请使用该destroy方法。

 
         $( 
         '.selectpicker' 
         ).selectpicker( 
         'destroy' 
         );

属性：

在Html中添加multiple表示支持多选，不需要额外添加其他属性，样式！当为多选状态，选中的对象为数组，当为单选状态，选中的对象为字符串。

noneSelectedText:'请选择'

liveSearch：true/false 启用搜索栏

liveSearchStyle：begins 搜索栏样式？

actionsBox：true/false 启用全选，清除按钮

item：0 设置第0项为只能单选状态

hideDisabled：true/false 设置启用/禁用隐藏

valueField 值字段

textField 显示文本字段

size 显示项目的个数

width 下拉框宽度单位px

value 选中的值，以","分隔

multiple:"true" 单选或者多选

selectpicker其他属性

参数名	类型	默认值	描述
actionsBox	bool	`false`	当设置为`true`，增加了两个按钮，下拉菜单的顶部（全选和取消全选）。
container	string\| false	`false`	当设置为一个字符string，追加选择一个特定的元素或选择器，例如 `container: 'body' \| '.main-body'`
countSelectedText	string\| function	`function`	设置当selectedTextFormat是显示文本的格式`count`或`count > #`。{0}是所选择的量。{1}是用于选择的总可用。当设定为一个函数，第一个参数是所选择的选项的数目，并且第二个是选项的总数。该函数必须返回一个字符string。
deselectAllText	string	`'Deselect All'`	当取消选择所有选项按钮上的文本`actionsBox`被启用。
dropdownAlignRight	bool \| `'auto'`	`false`	对齐菜单，而不是左右。如果设置为`'auto'`，如果在左对齐没有余地菜单的全宽度的菜单会自动右对齐。
dropupAuto	bool	`true`	进行检查以查看其具有更多的空间，上方或下方。如果dropup有足够的空间完全打开正常，但上面有更大的空间，在dropup仍能正常打开。否则，就变成了dropup。如果dropupAuto设置为false，dropups必须手动调用。
header	string	`false`	增加了菜单的顶部的头部; 默认包含关闭按钮
hideDisabled	bool	`false`	从菜单中删除禁用的选项和optgroups `data-hide-disabled: true`
iconBase	string	`'glyphicon'`	将基地使用不同的图标字体代替Glyphicons。如果改变iconBase，你也可能要更改`tickIcon`，以防新的图标字体使用了不同的命名方案。
liveSearch	bool	`false`	当设置为`true`，增加了一个搜索框的下拉selectpicker的顶部。
liveSearchNormalize	bool	`false`	设置liveSearchNormalize以`true`允许不区分重音的搜索。
liveSearchPlaceholder	string	`null`	当设置为一个字符string，一个占位符属性等于该字符string将被添加到实况搜索输入。
liveSearchStyle	string	`'contains'`	当设置为`'contains'`，搜索将显示包含搜索到的文本选项。例如，搜索，返回鸭都为PL PL E，PL嗯，和PL antain。当设置为`'startsWith'`，寻找PL只会返回PL UM和PL antain。
maxOptions	integer \| false	`false`	当设置为一个integer ，并在多选择，所选选项的数量不能超过给定值。该选项还可以存在作为数据属性为`<optgroup>`，在这种情况下，它仅适用于`<optgroup>`。
maxOptionsText	string\| array \| function	`function`	启用maxOptions时所显示的文本，并为给定的方案选项的最大数量已被选定。如果使用的功能，它必须返回一个数组。阵列[0]是当maxOptions被施加到整个选择元件使用的文本。阵列[1]是当maxOptions上的OPTGROUP用于使用的文本。如果使用字符string，相同的文字用于元素和OPTGROUP两者。
mobile	bool	`false`	当设置为`true`，使能选择菜单中的设备的本机菜单。
multipleSeparator	string	`', '`	坐落在分隔所选选项的按钮显示的字符。
noneSelectedText	string	`'Nothing selected'`	当多个选择时所显示的文本没有选择的选择。
selectAllText	string	`'Select All'`	当选择了所有选项，按钮上的文本`actionsBox`被启用。
selectedTextFormat	`'values'`\| `'static'`\| `'count'`\| `'count > x'`（其中，x是integer ）	`'values'`	指定选择如何显示有多个选择。 `'values'`显示所选择的选项（由分隔的列表`multipleSeparator`。`'static'`简单地显示所述选择元件的标题。`'count'`显示所选选项的总数量。`'count > x'`行为类似于`'values'`直到所选选项的数目大于x;在此之后，它的行为象`'count'`。
selectOnTab	bool	`false`	当设置为`true`，对待像selectpicker下拉列表中输入或空格字符制表符。
showContent	bool	`true`	当设置为`true`，显示与该按钮选择的选项（一个或多个）相关联的自定义的HTML。当设置为`false`，期权价值将被显示。
showIcon	bool	`true`	当设置为`true`，与在按钮选择的选项（一个或多个）相关联的显示的图标（一个或多个）。
showSubtext	bool	`false`	当设置为`true`与所述按钮选择的选项相关联，显示潜台词。
showTick	bool	`false`	show（没有的项目上选择的选项勾选`multiple`属性）。
size	`'auto'`\| integer \| false	`'auto'`	当设置为`'auto'`，菜单始终打开，以显示尽可能多的项目窗口将允许在没有被切断。当设置为integer 时，菜单将显示项目的给定数量，即使下拉被切断。当设置为`false`，菜单会一直显示所有项目。
style	string\| null	`null`	当设置为一个字符string，添加值到该按钮的风格。
tickIcon	string	`'glyphicon-ok'`	设置要使用的图标旁边显示的“滴答”来选择的选项。
title	string\| null	`null`	对于selectpicker的默认标题。
width	`'auto'`\| `'fit'`\| css-width\| false（其中`css-width`是单位CSS的宽度，例如`100px`）	`false`	当设置为`auto`，所述selectpicker的宽度被自动调节，以适应最宽的选项。当设置为一个css-宽度，所述selectpicker的宽度内联强制为给定值。当设置为`false`，所有宽度信息被删除。
windowPadding	integer \| array	`0`	这是在该窗口中有一个下拉菜单中不应该涉及的领域情况下非常有用-例如一个固定的头。当设置为一个integer ，同样填充将被添加到四面八方。可替代地，一个integer 数组可以在格式来使用`[top, right, bottom, left]`。