要实现的效果如下,通过一级标签来控制二级标签,
第一步:在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>"); } } }