最近在写前端页面,遇到一个实现多选的下拉菜单,所以我选择了bootstrap-select这个控件,首先得引入css和js
<link rel="stylesheet"
href="#springUrl('/static/bootstrap-select/css/bootstrap-select.min.css')" />
<script type="text/javascript"
src="#springUrl('/static/bootstrap-select/js/bootstrap-select.min.js')"></script>
下面这段代码实现了从后端拿到数据,然后填充到下拉菜单里面。
$(function() {
$(".selectpicker").selectpicker({
noneSelectedText : '请选择'//默认显示内容
});
//初始化刷新数据
$(window).on('load', function() {
$('.selectpicker').selectpicker('val', '');
$('.selectpicker').selectpicker('refresh');
});
var selectDeptId = $("#deptId").val();
//下拉数据加载
$.ajax({
type : 'get',
url : "#springUrl('/proj/getParticipatingDeptList')?leadingDeptId="+selectDeptId,
dataType : 'json',
success : function(datas) {//返回list数据并循环获取
var select = $("#deptId1");
for (var i = 0; i < datas.length; i++) {
select.append("<option value='"+datas[i].deptId+"'>"
+ datas[i].deptName + "</option>");
}
$('.selectpicker').selectpicker('val', '');
$('.selectpicker').selectpicker('refresh');
}
});
});
但是在编辑功能的时候,需要先将之前选的数据加载在框中。
$(function() {
$(".selectpicker").selectpicker({
noneSelectedText : '请选择'//默认显示内容
});
//初始化刷新数据
var projDeptList = '$!{projDeptList}';
if(projDeptList.length != 0){
var json = JSON.parse(projDeptList);
var array=new Array();
//var json = eval('$!{allDeptList}');
for(var i = 0; i < json.length; i++){
var id = json[i].deptId;
array.push(id);
}
}
var selectDeptId = $("#deptId").val();
//下拉数据加载
$.ajax({
type : 'get',
url : "#springUrl('/proj/getParticipatingDeptList')?leadingDeptId="+selectDeptId,
dataType : 'json',
success : function(datas) {//返回list数据并循环获取
var select = $("#deptId1");
for (var i = 0; i < datas.length; i++) {
console.log(datas[i].deptId + datas[i].deptName);
select.append("<option value='"+datas[i].deptId+"'>"
+ datas[i].deptName + "</option>");
}
$('.selectpicker').selectpicker('val', array);
$('.selectpicker').selectpicker('refresh');
}
});
});
以上代码从后端的modelandview里面拿到'$!{projDeptList}',对其进行处理之后塞到array里面,只需用$('.selectpicker').selectpicker('val', array)即可实现数据加载。