最近在做一个项目，用到了二级下拉菜单，当你选到一级下拉菜单时，二级菜单会根据一级菜单内容特定显示相关的内容。如图：
这里
我首先想到了ajax异步提交，一级菜单id，后台根据Id获取该目录下的二级菜单列表，然后回传前台。思路很清晰，但实施起来却要人老命啊。ajax提交回传单一数据还好，直接就能取值了，但是现在是将List集合存入json中，这足够让我头大，我在网上搜索了大量的这方面的内容，大家写的简直四乱的不要不要的，但是，list存入json的思路却是众口一致，这里我总结了一下，在原有的基础上进行了调整。附上源码：
2.
strust2中的action实现方法：
/*
* 利用ajax提交后台id，将二级菜单列表存储到json中 2017.08.13 miki
*/
public String show()throws Exception{
HttpServletResponse response=ServletActionContext.getResponse();
if(categoryId>0){
System.out.println("父Id为"+categoryId);
response.setContentType("text/json"); // 回传内容设为json格式 2017.08.13 miki
response.setCharacterEncoding("UTF-8"); /*设置字符集为'UTF-8'，不然从数据库取中文数据时显示到前端，会乱码*/
//根据一级菜单选中的Id，得到对应的二级列表
menuList=menuService.getMenuListBycategoryId(categoryId);
//以jsonArray数据形式存入json中
JSONArray menus=JSONArray.fromObject(menuList);
/*
* response顾名思义就是服务器对浏览器的相应，PrintWriter它的实例就是向前台的JSP页面输出结果
*/
PrintWriter out=response.getWriter();
out.print(menus.toString());
out.flush();
out.close();
}
return null;
3.
struts.xml文件配置：
<!-- 即使采用json前后台交互，也要定义Comment的Action映射，不然struts拦截器拦截不到 2017.08.08 miki -->
<action name="Comment_*" class="miki.action.shop.CommentAction" method="{1}">
</action>
<action name="Operate_*" class="miki.action.shop.OperateAction" method="{1}">
</action>
<action name="Menu_*" class="miki.action.shop.MenuAction" method="{1}">
</action>
4.
jsp中的select选择框：
<li>
<label>所属分类：</label>
<select id="category" name="source.category.id" class="select category-1" οnchange= "change()">
<option value="0">请选择</option>
<c:forEach items="${categoryList }" var="category">
<option value="${category.id }" ${curCategory.id==category.id?'selected':'' }>${category.name }</option>
</c:forEach>
</select>
<select id="sel_subclass" style="display:" name="source.menu.id">
<option value="0">请选择</option>
</select>
<em></em>
</li>
5.
js中获取json中的list，将其遍历显示到页面select选择框中去：
选择一级菜单时，会触发onchange中的change函数，然后将选中的id获取，ajax提交到后台，
//二级菜单显示 miki 2017.08.13
function change() {
var categoryId=$("#category").val(); //获取select选中的一级菜单id
var tbody=window.document.getElementById("sel_subclass"); //获取select选择框元素 2017.08.13 miki
$.ajax({
type: "post",
dataType: "json",
url: "Menu_show.action",
data: {
categoryId:categoryId }, //将categoryId封装到data中
success: function (msg) { //自定义function回传函数，msg对应action中的json对象menus
if (msg.length>0) { //遍历msg中的数据，将其打印到select的option标签中
var str = "";
for (var key in msg) {
str += "<option value="+ msg[key].id+" ${curMenu.id==menu.id?'selected':'' }>" +msg[key].name+ "</option>";
}
tbody.innerHTML = str;
}
},
error: function () {
alert("查询失败")
}
});
}
6.
完美执行，虽然是一个小小的二级菜单级联操作，但是用到了很多知识，同时也让我巩固了ajax方面的技术：
