Bootstrap 下拉多选插件bootstrap-select

Bertha 。 2022-03-20 17:38 575阅读 0赞

**下载地址：**[https://github.com/silviomoreto/bootstrap-select][https_github.com_silviomoreto_bootstrap-select]

**文档参考：**[http://developer.snapappointments.com/bootstrap-select/][http_developer.snapappointments.com_bootstrap-select]

![2019021312221249.png][]    ![20190214113045175.png][]

下载解压之后放到项目下，**引入 css 和 js :**

### 一、使用 ###

**1、基本单选使用：**.selectpicker 类

![20190214130959954.png][]        ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70][]

**2、支持多选：multiple 属性**

**3、组件加搜索功能：**data-live-search="true" 属性

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 1][]   ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 2][]

**4、选项分组：**

**5、设置最多选中项的数量：（最多选2个），data-max-options="2"；  selected 属性 默认选中,  disabled 禁用选项**

![20190214135007465.png][]

### 二、取值与赋值 ###

**1、组件取值： 选择器 .val() 取值**

单选： 取值为一个值

多选： 取值为一个数组

$(".selectpicker").on("change",function () {
            alert($(".selectpicker").val());
            console.log($(".selectpicker").val());
        });

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 3][]   ![20190214133921265.png][]

**2、组件赋值：选择器 .val('山东省') 取值 无效**

单选赋值：

$('.selectpicker').selectpicker('val', '山东省');

多选赋值：

$('.selectpicker').selectpicker('val', ['浙江省','湖南省','山东省']);

[https_github.com_silviomoreto_bootstrap-select]: https://github.com/silviomoreto/bootstrap-select
[http_developer.snapappointments.com_bootstrap-select]: http://developer.snapappointments.com/bootstrap-select/
[2019021312221249.png]: https://img-blog.csdnimg.cn/2019021312221249.png
[20190214113045175.png]: /images/20220320/cd35b2fffe234bac9349563b782153b3.png
[20190214130959954.png]: https://img-blog.csdnimg.cn/20190214130959954.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70]: /images/20220320/973953271e2843c4b0236bad4a6b0fe4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190214132402335.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 2]: /images/20220320/018d6631c99e4f8382127e52756e14a1.png
[20190214135007465.png]: /images/20220320/0e4540b708a7414591227cc59f547482.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190214133901810.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0,size_16,color_FFFFFF,t_70
[20190214133921265.png]: /images/20220320/68eb04e6d2ed462883e07df5f91e2f83.png