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。