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

		}

	}

}