零零碎碎bootstrap 多選下拉框

附上官網api鏈接，http://silviomoreto.github.io/bootstrap-select/.
以下內容，大部分摘自文章：https://www.cnblogs.com/anny0404/p/5329960.html
筆者再自行根據需要添加必要的內容。
html頁面中，引用如下：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-zh_CN.min.js"></script>

最後一條內容非必要到引用，只是爲了中文顯示用到才需要加上。

佈局後body部分添加多選下拉框如下：

<div class="form-group">
                           <label class="col-sm-3 control-label">客資類型：</label>
                            <div class="col-sm-4">
                                <select id="usertype" name="usertype" class="selectpicker show-tick form-control" multiple data-live-search="false">
                                        <option value="0">蘋果</option>
                                        <option value="1">菠蘿</option>
                                        <option value="2">香蕉</option>
                                        <option value="3">火龍果</option>
                                        <option value="4">梨子</option>
                                        <option value="5">草莓</option>
                                        <option value="6">哈密瓜</option>
                                        <option value="7">椰子</option>
                                        <option value="8">獼猴桃</option>
                                        <option value="9">桃子</option>
                                </select>
                            </div>
                          </div>

【沒有選中任何值】這個提示語原本是英文到，後來添加了script的引用，就顯示爲中文了。

獲取值， $("#XXX").val()即可
回顯操作：
用方法 $(’.selectpicker’).selectpicker(‘val’, ‘Mustard’);
Mustard處填入數組。代碼如下：

var str='3,4,5,6';
var arr=str.split(',');
$('#usertype').selectpicker('val', arr);

拓展：
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爲逗號隔開的值得字符串，賦值後展開後自動打勾
————————————————
版權聲明：本文爲CSDN博主「lianzhang861」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/lianzhang861/article/details/80909901