Bootstrap select实现下拉框多选效果
编程学习 2021-07-04 19:20www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了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 = $;
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。