数据来自后台非Ajax加载的联动实现方法

时间:2022-10-03 19:38:50

要实现的效果如下,通过一级标签来控制二级标签,

数据来自后台非Ajax加载的联动实现方法

第一步:在Conctroller中获取数据,并且请到modle里面返回

ModelAndView model = new ModelAndView("/admin/test");
Map<String, List<String>> tagMap = tagService.getTagMap();
model.addObject("tags", tagMap);

第二步:在jsp(注意一定要是jsp)中使用EL表达式读取tagMap的值放到javascript模拟的map里面。(javascript map的实现参考另一遍随笔)

<script type="text/javascript">
var map = new Map();
var vrr;
<c:forEach items="${tags}" var="tag1">
vrr = new Array();
<c:forEach items="${tag1.value}" var="tag2">
vrr.push("${tag2}");
</c:forEach>
map.put("${tag1.key}", vrr);
</c:forEach>
var tag1 = $("#tag1");
vrr = map.keys();
for ( var i = 0; i < vrr.length; i++) {
tag1.append("<option value='"+vrr[i]+"'>" + vrr[i] + "</option>");
}
</script>

第三步:编写tag1的onchange事件

tag = {
"tag1Change" : function() {
tag1 = $("#tag1");
vrr = map.get(tag1.val());
tag2 = $("#tag2");
tag2.empty();
for ( var i = 0; i < vrr.length; i++) {
tag2.append("<option value='"+vrr[i]+"'>" + vrr[i] + "</option>");
}
}
}