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');
})