手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

bootstrap-select实现下拉框多选效果

时间:2024-10-12 18:56:27

1、最终实现的效果:

bootstrap-select实现下拉框多选效果

2、HTML代码:<divclass="挢旗扦渌;row"style="margin-top:10px;"><divclass="form-group col-xs-12"><labelfor="sceneModel_title"class="col-sm-1 col-sm-offset-1 control-label">分类:</label><divclass="col-sm-4"><selectclass="form-control selectpicker"multiple><option>请选择</option><option>游记</option><option>景点</option><option>东京</option><option>日本</option><option>香港</option><option>加拿大</option></select></div><labelfor="scene_title"class="col-sm-1 control-label">主题游:</label><divclass="col-sm-4"><selectclass="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>

3、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();varlon = $("input[name=longitude]").val();if(lon ==",") {$("input[name=longitude]").val("");}jQuery('.selectpicker').selectpicker({liveSearch:true,size:8});});module.exports = $;});

© 手抄报圈