bootstrap select 多选的用法，取值和赋值（取消默认选择第一个的对勾）

谁借莪１个温暖的怀抱￠ 2022-05-21 09:08 342阅读 0赞

h5自带的select标签可以实现按住ctrl键多选的功能，但是样式及其难看。

bootstrap select是很好用的前端插件

![70][]

首先引入bootstrap和bootstrap-select的css和js

下载地址：[https://download.csdn.net/download/lianzhang861/10617543][https_download.csdn.net_download_lianzhang861_10617543]

**html**：主要是增加class selectpicker 并添加multiple属性

option一般为ajax添加

**js**：初始化是为

$("#weatherType").selectpicker('refresh');

这样默认选中第一个

![70 1][]

如果想默认什么也不选，则：

$("#weatherType").selectpicker('deselectAll');

![70 2][]

注意，默认不选显示的字样需要在select中设置title属性，不然会显示默认的 英文 nothing selected;

**多选框的取值**：

$("#weatherType").val()

直接取值就行，多选的值会自动用逗号分隔开

但如果你提交数据时将表单序列化

var formData = $("#createUserForm").serialize();

则val()只能取到一个选中的值，无法传入多选的值

解决办法：

$("#weatherType").change(function(){
                $("input[name=weatherType1]").val($("#weatherType").val())
        })

在change事件时将值赋给另一个隐藏的input即可

多选框的赋值：

$("#weatherType").selectpicker ("val",weatherType).trigger("change");

其中weatherType为逗号隔开的值得字符串，赋值后展开后自动打勾

![70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70][]

[70]: /images/20220521/30d56a040c1f4b39b30501811522a2b3.png
[https_download.csdn.net_download_lianzhang861_10617543]: https://download.csdn.net/download/lianzhang861/10617543
[70 1]: /images/20220521/c48e0368bbce40048d0a2acfdcb8e3cd.png
[70 2]: /images/20220521/f9099e20193742ffb40611ec2cff5a24.png
[70 3]: /images/20220521/2a91c4796c524368b6c7474c023b664c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70]: /images/20220521/8a550c0d42864983bc4cd89a16fa0568.png