在用Bootstrap Multiselect 动态二联赋值的时候,从后台传来的值,给动态赋值,解决办法,此办法是在网上看了很久,找到一位兄台解决的,此记录作为自己以后复查,
效果图如下:
源码如下:
引入js文件
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-2.1.3/jquery-2.1.3.min.js"></script>
<!-- select2 css js -->
<script src="${pageContext.request.contextPath}/js/jquery/select2/js/select2.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery/select2/js/i18n/zh-CN.js"></script>
<link href="${pageContext.request.contextPath}/js/jquery/select2/css/select2.min.css" rel="stylesheet"/>
<!-- multiselect js css -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/js/jquery/multiselect/css/bootstrap-3.3.2.min.css" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/multiselect/js/bootstrap-3.3.2.min.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/js/jquery/multiselect/css/bootstrap-multiselect.css" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/multiselect/js/bootstrap-multiselect.js"></script>
jsp中页面源码:
<td style="width: 350px;padding-left:15px;">
省份
<select id="provinceId" name="provinceId" style="width: 130px;">
<option value="">全部</option>
<c:forEach items="${provinceList}" var="province">
<option value="${province.id}">${province.text}</option>
</c:forEach>
</select>
</td>
<td style="width: 350px;padding-left:15px;">
城市
<select id="cityId" name="cityId" style="width: 130px;" class="" multiple="multiple"></select>
</td>
js中的源码:
$(document).ready(function() {
// 省份
$('#provinceId').select2({
"language" : "zh-CN"
}).on('select2:select', function(data) {
var selectedValue = $(this).select2(data)[0].value;
setCity(selectedValue);
});
$('#cityId').multiselect({
includeSelectAllOption: true,
selectAllValue:'select-all-value',
nonSelectedText:'请选择',
nSelectedText:'个城市',
allSelectedText:'全部',
selectAllText:"全部城市",
maxHeight: 300
});
});
function setCity(provinceId) {
$.ajax({
type : "POST",
url : ctx+"/query/city",
data : "provinceId="+provinceId,
success : function(jsonData) {
//此处当省份选择为全部=""的时候的特殊处理
var citys=provinceId.length==0?"":eval(jsonData);
$.each(citys, function(index, city) {
$("#cityId").append('<option value="' + city.id + '">' + city.text + '</option>');
});
/**
* Bootstrap Multiselect 动态赋值选项卡 2
*/
var newCitys = new Array();
var obj = new Object();
$.each(citys, function(index, city) {
obj = {
label : city.text,
value : city.id
};
newCitys.push(obj);
});
$("#cityId").multiselect('dataprovider', newCitys);
$('#cityId').multiselect('refresh');
}
});
}