bootstrap-select采坑

我不是女神ヾ 2021-09-19 06:52 673阅读 0赞

bootstrap-select采坑  
1.class="selectpicker" 普通的下拉框功能  
2.title="请选择城市名称" title的作用与palcehoder一样。  
3.select class="selectpicker" multiple selectpicker和multiple属性的搭配使用可实现多选  
4.data-live-search="true" 这个属性的默认值是false,作用是打开模糊筛查搜索框。  
5.data-max-options 这个属性表示最多可选几个，搭配multiple使用，  
用法：data-max-options=“2”，表示最多选两个。  
6..data-selected-text-forma缩略模式， 用法：data-selected-text-format="count > 3"，  
当选中值大于3个的时候只显示选中项的个数，注意只对多选生效。  
7.data-style 表示默认选中样式，  
用法：data-style="btn-primary"，属性值就是bootstrap的按钮样式。  
8..data-size data-size="6",表示下拉框显示的下拉列表数量。  
9.data-dropup-auto=""

10.data-dropup-auto="false"， 表示下拉框默认向下展开；"true"，表示下拉框默认向下展开；  
"auto"，（默认值）表示下拉框根据页面尺寸自动向下或向上展开。  
11$('.selectpicker').selectpicker('selectAll'); 全选：  
$('.selectpicker').selectpicker('deselectAll'); 反选：  
$('.selectpicker').selectpicker('mobile'); 适应手机模式：  
12./给下拉框赋初始值   .selectpicker:eq(0)表示该页面或者该表单的第几个使用了第几个selectpicker属性的input标签  
                            $('.selectpicker:eq(0)').selectpicker('val',valArea);  
                            $('.selectpicker:eq(1)').selectpicker('val',valPost);  
                            $('.selectpicker:eq(2)').selectpicker('val',valBank);  
                            $('.selectpicker').selectpicker('refresh');  
                            $('.selectpicker').selectpicker('render');  
                        \});

13.与angular或者knockout合用问题：  
即下拉框无法显示出选项，但实际上，按下F12去查看时，又明显的有这些选项值，只是页面无法展示。  
a. 添加Js：(只有在编译之后第一次进入页面的时候生效，一旦刷新之后就失效(因为angular异步加载)  
$(function () \{  
$('.selectpicker').selectpicker('refresh');  
$('.selectpicker').selectpicker('render');  
\})