Bootstrap-select多選

一、Bootstrap-select多選屬性

Bootstrap-select是一款基於Bootstrap的下拉框插件，支持搜索、多選、非同步載入等功能，適用於PC端和移動端。在使用Bootstrap-select多選時，有一些屬性需要了解：

1. data-selected-text-format: 用來控制選擇項的展示格式。有count、values和static三種格式，其中count表示選中數量，values表示選中值，static表示以自定義字元連接各個選中項。

2. data-actions-box: 用來控制是否顯示操作按鈕，有true和false兩種選項。

3. data-select-all-text: 用來控制全選框的顯示文本。

<select class="selectpicker" multiple data-selected-text-format="count" 
data-actions-box="true" data-select-all-text="全選">
    <option>選項1</option>
    <option>選項2</option>
    <option>選項3</option>
</select>

二、Bootstrap-select多選

Bootstrap-select支持多選，用戶可以通過按住Ctrl鍵多選，也可以通過shift鍵連續選擇多個選項。當選擇多個選項時，選中數量和選中值可以以不同的方式展示。如下面這個例子：

<select class="selectpicker" multiple data-selected-text-format="static" 
data-actions-box="true" data-select-all-text="全選">
    <option>選項1</option>
    <option>選項2</option>
    <option>選項3</option>
</select>

本例子中使用了static格式來展示選擇項，會以”,”連接各個選中項。

三、Bootstrap-select多選下拉框

Bootstrap-select多選也可以使用下拉框來展示選項，只需添加data-dropup-auto屬性即可。如下面這個例子：

<select class="selectpicker" multiple data-dropup-auto="false" 
data-selected-text-format="count" data-actions-box="true" 
data-select-all-text="全選">
    <option>選項1</option>
    <option>選項2</option>
    <option>選項3</option>
</select>

本例子中使用了data-dropup-auto=”false”屬性來禁止使用dropup方式展示。

四、Bootstrap-select獲取選中的值

Bootstrap-select使用val()方法可以獲取選中的值，返回值為一個數組。如下面這個例子：

$('.selectpicker').val();

注意：在使用val()方法時，需確保該元素已被初始化，否則返回的是undefined。