bootstrap-select实现下拉框多选效果
1、最终实现的效果：
2、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>
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();
var lon = $("input[name=longitude]" ).val();
if (lon == "," ) {
$( "input[name=longitude]").val("" );
}
jQuery( '.selectpicker').selectpicker({
liveSearch: true,
size:8
});
});
module.exports = $;
});