开发需要使用到多选,可搜索,满足这个条件的插件有select2 和 bootstrap-select
开始发现seelct2 的效果更好就拿过来用了,但是,发现和bootstrap的兼容没有问题,就放弃了
下面说下bootstrap-selec使用注意事项和完整流程:
首先引入js和css文件:
下载地址:http://silviomoreto.github.io/bootstrap-select/
下载好后,只需要将dist 文件夹中的东西丢到项目中
jsp引入:
<link rel="stylesheet" href="${ctxPath}/你的webapp下的地址/css/bootstrap-select.min.css"/>
<script type="text/javascript" src="${ctxPath}/你的webapp下的地址/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="${ctxPath}/你的webapp下的地址/js/i18n/defaults-zh_CN.js"></script>
注意:
这里引入的文件一定要放在你对应的js文件的前面,加载顺序问题,要先加载插件,再去加载你的js文件,不然会有问题
jsp使用select
<div class="form-group">
<label for="list" class="col-lg-3 control-label">选择信息:</label>
<div class="col-sm-8">
<select id="list" name="select" title="请选择信息"
class="selectpicker show-tick form-control" multiple data-live-search="false">
</select>
</div>
</div>
关键字 : multiple
--加这个表示可以选取多个内容
js文件 加载控件
$(function(){
$(".selectpicker").selectpicker({
dropuAuto : false,
liveSearch : true //打开搜索功能
});
ajax请求数据遍历:});
$.get... { var list = ""; for(var i=0; i<resp.length; i++){ list += '<option value='+resp[i].id+'>'+resp[i].name+'</option>'; } $("#list").append(list); $("#list").selectpicker('refresh');//刷新到页面 });
注意: 任何对select数据的操作都要在刷新数据之前操作 ,比如要给其绑定点击事件$("#list").append(list); $('#list').on('change', function () { onSelectChange($(this).val());//具体操作的方法 }); $("#listPark").selectpicker('refresh');//最后刷新到页面
最后使用过程中,可能会有一些样式问题,需要调整,比如下拉框盖住了数据的显示等。。
这里只把我使用到的一些css分享一下,只作为参考
div#name{ margin-left: 24%; } .radio label { padding-left: 30px; } .btn{ white-space:normal; } .bootstrap-select :after{ display:block; content:''; clear: both; } .dropdown-menu.open { position: relative; top: 0%; } div#upload_file { margin-top: 40px; } .datepicker { z-index: 9999; } div#form-group-no{ margin-top: 33px; }