一、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。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/246717.html
微信扫一扫 
支付宝扫一扫 