Bootstrap select实现下拉框多选效果
在学习bootstrap实现下拉多选效果的时候，觉得该效果很好，所以拿来分享下，这里就不详细的描述了，直接附上代码给各位看看
HTML代码：
<divclass="row"style="margin-top:10px;">
<divclass="form-groupcol-xs-12">
<labelfor="sceneModel_title"class="col-sm-1col-sm-offset-1control-label">分类:</label>
<divclass="col-sm-4">
<selectclass="form-controlselectpicker"multiple>
<option>请选择</option>
<option>游记</option>
<option>景点</option>
<option>东京</option>
<option>日本</option>
<option>香港</option>
<option>加拿大</option>
</select>
</div>
<labelfor="scene_title"class="col-sm-1control-label">主题游:</label>
<divclass="col-sm-4">
<selectclass="form-controlselectpicker"multiple>
<option>请选择</option>
<option>游船</option>
<option>漂流避暑</option>
<option>博物馆</option>
<option>影视基地</option>
<option>名胜古迹</option>
<option>海岛度假</option>
</select>
</div>
<!--<divclass="col-sm-10">-->
<%--<form:checkboxespath="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();
varlon=$("input[name=longitude]").val();
if(lon==","){
$("input[name=longitude]").val("");
}
jQuery('.selectpicker').selectpicker({
liveSearch:true,
size:8
});
});
module.exports=$;
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。