bootstrap select 多選的用法,取值和賦值(取消預設選擇第一個的對勾)
阿新 • • 發佈:2019-01-10
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為逗號隔開的值得字串,賦值後展開後自動打勾