方法
.selectpicker('val')
您可以通過調用val元素上的方法來設置所選值。
|
1
2
|
$(
'.selectpicker'
).selectpicker(
'val'
,
'Mustard'
);
$(
'.selectpicker'
).selectpicker(
'val'
, [
'Mustard'
,
'Relish'
]);
|
這不同於val()直接在select元素上調用。如果val()直接調用元素， bootstrap-select ui將不會刷新（因為只從用戶交互時觸發事件）。你必須自己調用ui刷新方法。
|
1
2
3
4
5
|
$(
'.selectpicker'
).val(
'Mustard'
);
$(
'.selectpicker'
).selectpicker(
'render'
);
// this is the equivalent of the above
$(
'.selectpicker'
).selectpicker(
'val'
,
'Mustard'
);
|
.selectpicker('selectAll')
這將選擇在multi-select模式下的所有選項。
|
1
|
$(
'.selectpicker'
).selectpicker(
'selectAll'
);
|
.selectpicker('deselectAll')
這將取消選擇在multi-select模式下的所有選項。
|
1
|
$(
'.selectpicker'
).selectpicker(
'deselectAll'
);
|
.selectpicker('render')
您可以強制使用該render方法重新渲染bootstrap-select ui 。如果當您編程時更改任何相關值而影響元素布局，這將非常有用。
|
1
|
$(
'.selectpicker'
).selectpicker(
'render'
);
|
.selectpicker('mobile')
通過$('.selectpicker').selectpicker('mobile')，是的手機可以滾動選項。這將啟用手機的原生菜單以進行選擇頁面上的菜單。
檢測瀏覽器的方法由用戶決定。
|
1
2
3
|
if
( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
$(
'.selectpicker'
).selectpicker(
'mobile'
);
}
|
.selectpicker('setStyle')
修改與按鈕本身或其容器相關聯的類。
如果更換容器上的類：
|
1
|
$(
'.selectpicker'
).addClass(
'col-lg-12'
).selectpicker(
'setStyle'
);
|
如果更改按鈕上的類（更改數據樣式）：
|
1
2
3
4
5
6
7
8
|
// 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禁用/啟用選擇時，這是必需的。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
$(
'.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菜單的打開/關閉。
|
1
|
$(
'.selectpicker'
).selectpicker(
'toggle'
);
|
.selectpicker('hide')
以編程方式隱藏bootstrap-select使用hide方法（這僅影響bootstrap-select自身的可見性）。
|
1
|
$(
'.selectpicker'
).selectpicker(
'hide'
);
|
.selectpicker('show')
以編程方式顯示bootstrap-select使用show方法（這僅影響引導選項本身的可見性）。
|
1
|
$(
'.selectpicker'
).selectpicker(
'show'
);
|
.selectpicker('destroy')
要以編程方式銷毀bootstrap-select，請使用該destroy方法。
|
1
|
$(
'.selectpicker'
).selectpicker(
'destroy'
);
|