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

bootstrap select是很好用的前端外掛

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

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-select.min.css">
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap-select.min.js" type="text/javascript" charset="utf-8"></script>
 

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

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

</select>

option一般為ajax新增

js：初始化是為

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

這樣預設選中第一個

如果想預設什麼也不選，則：

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

注意，預設不選顯示的字樣需要在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為逗號隔開的值得字串，賦值後展開後自動打勾