最近一直在用 bootstrap selectpicker 的一些东西,先看效果如下:
GitHub链接,http://silviomoreto.github.io/bootstrap-select/
直接clone下来,获取包
链接:https://pan.baidu.com/s/1Iset8doXqv_ZSH_jzeckFg
提取码:etyl
解压,获取所用到的js,css
在jsp页面引入
<link rel="stylesheet" type="text/css" href="${contextPath }/resources/bootstrap/css/bootstrap-select.min.css" rel="stylesheet" ></link>
<script src="${contextPath}/resources/bootstrap/js/bootstrap-select.min.js"></script>
div代码
<div class="col-md-2" style="width: 10%;">
<select class="form-control selectpicker" id="entryStatesIDrwh"
name="entryStates" multiple="multiple" title="<s:message code="page.entry.state.choose"/>">
<option value="0"><s:message code="page.entry.state.unreleased"/></option>
<option value="1"><s:message code="page.entry.state.released"/></option>
<option value="2"><s:message code="page.entry.state.releaseAndUpdate"/></option>
<option value="3"><s:message code="page.entry.state.offline"/></option>
<option value="4"><s:message code="page.entry.state.offlineAndUpdate"/></option>
</select>
</div>
加入页面加载即加载状态
$(function() {
//初始化刷新数据
$(window).on('load', function() {
$('#entryStatesIDrwh').selectpicker('val', ${entryStates});
});
});
注:
${entryStates} 为后台返回的数组,格式为[1,2,3]
另:
使用此控件时,如果有 disabled 判断的语句,如下
refesh必须用,否则无法使disabled失效。