1. 程式人生 > >bootstrap-select採坑

bootstrap-select採坑

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