数据来自后台非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>");
		}
	}
}

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

相关推荐