bootstrap-select实现下拉框多选效果
bootstrap-select實現下拉框多選效果
-
在學習bootstrap實現下拉多選效果的時候，覺得該效果很好，所以拿來分享下，這里就不詳細的描述了，直接附上代碼給各位看看
方法/步驟
最終實現的效果：
HTML代碼：
<div?class=?"row"?style?="margin-top?:10px;">
????????????????????<div?class=?"form-group col-xs-12">
?????????????????????????<label?for=?"sceneModel_title"?class="col-sm-1 col-sm-offset-1 control-label"?>分類:?</label>
?????????????????????????<div?class=?"col-sm-4">
??????????????????????????????<select?class=?"form-control selectpicker"?multiple>
???????????????????????????????????<option>?請選擇</option?>
???????????????????????????????????<option>?游記</option?>
???????????????????????????????????<option>?景點</option?>
???????????????????????????????????<option>?東京</option?>
???????????????????????????????????<option>?日本</option?>
???????????????????????????????????<option>?香港</option?>
???????????????????????????????????<option>?加拿大</option?>
??????????????????????????????</select>
?????????????????????????</div>
?????????????????????????<label?for=?"scene_title"?class="col-sm-1 control-label"?>主題游:?</label>
?????????????????????????<div?class=?"col-sm-4">
??????????????????????????????<select?class=?"form-control selectpicker"?multiple>
???????????????????????????????????<option>?請選擇</option?>
???????????????????????????????????<option>?游船</option?>
???????????????????????????????????<option>?漂流避暑</option?>
???????????????????????????????????<option>?博物館</option?>
???????????????????????????????????<option>?影視基地</option?>
???????????????????????????????????<option>?名勝古跡</option?>
???????????????????????????????????<option>?海島度假</option?>
??????????????????????????????</select>
?????????????????????????</div>
<!-- ????????????????????????<div class="col-sm-10"> -->
<%-- ?????????????????????????????<form:checkboxes path="sceneTypeRelations" items="${sceneTypeMap}" /> --%>
<!-- ????????????????????????</div> -->
????????????????????</div>
???????????????</div>
js代碼：
define(function(require, exports, module) {
?????var?$ = require(?"jquery");
?????require(?"jquery-validation/1.11.1/jquery.validate.min.js"?);
?????require(?"jquery-validation/1.11.1/messages_bs_zh.js"?);
?????require(?"bootstrap/select/bootstrap-select.min.css"?)
?????require(?"bootstrap/select/bootstrap-select.min.js"?)
?????$(document).ready(?function() {
???????????// 聚焦第一個輸入框
??????????$(?"input[name=name]").focus();
???????????// 為inputForm注冊validate函數
??????????$(?"#sceneModel").validate();
???????????var?lon = $("input[name=longitude]"?).val();
???????????if?(lon ==?","?) {
??????????????$(?"input[name=longitude]").val(""?);
??????????}
??????????
??????????jQuery(?'.selectpicker').selectpicker({
??????????????liveSearch:?true,
??????????????size:8
??????????});
?????});
?????module.exports = $;
});
轉載于:https://www.cnblogs.com/shsgl/p/5603550.html
總結
以上是生活随笔為你收集整理的bootstrap-select实现下拉框多选效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 读取并修改元素内容
- 下一篇： MIS性能优化常见问题与方案（辅助项目组