bootstrap select 多選的用法，取值和賦值（取消默認選擇第一個的對勾）

 

h5自帶的select標簽可以實現按住ctrl鍵多選的功能，但是樣式及其難看。

bootstrap select是很好用的前端插件

​

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

下載地址：https://download.csdn.net/download/lianzhang861/10617543

1. <link rel="stylesheet" href="css/bootstrap.css">

2. <link rel="stylesheet" href="css/bootstrap-select.min.css">

3. <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

4. <script src="js/bootstrap-select.min.js" type="text/javascript" charset="utf-8"></script>

html：主要是增加class selectpicker 並添加multiple屬性

1. <select id ="weatherType" name="weatherType" class="form-control selectpicker" multiple="multiple" title="請選擇">

3. </select>

option一般為ajax添加

js：初始化是為

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

這樣默認選中第一個

​

如果想默認什么也不選，則：

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

​

注意，默認不選顯示的字樣需要在select中設置title屬性，不然會顯示默認的 英文 nothing selected;

 

多選框的取值：

$("#weatherType").val()

直接取值就行，多選的值會自動用逗號分隔開

但如果你提交數據時將表單序列化

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

則val()只能取到一個選中的值，無法傳入多選的值

解決辦法：

1. $("#weatherType").change(function(){

2. $("input[name=weatherType1]").val($("#weatherType").val())

3. })

在change事件時將值賦給另一個隱藏的input即可

 

多選框的賦值：

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

其中weatherType為逗號隔開的值得字符串，賦值后展開后自動打勾

​