本文主要是介绍web项目的菜单展示-三级联动菜单展示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
三级联动菜单的展示
用的是Struts2 + Mybatis框架进行操作
文件结构
核心代码
CasCade.jsp
<%@ page pageEncoding="UTF-8" contentType="text/html;UTF-8" isELIgnored="false"%>
<html>
<head><script type="application/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script><script type="application/javascript">$(function () {//展示所有的省份$.ajax({url:"${pageContext.request.contextPath}/cascade/showAllProvinces",type:"GET",dataType:"json",success:function (provinces) {//把所有的省份展示在第一个下拉列列表中for (var i=0;i<provinces.length;i++){//创建option标签var option=$("<option value="+provinces[i].code+">"+provinces[i].name+"</option>");$("#province").append(option);}//初始化北京对应的市$.ajax({url:"${pageContext.request.contextPath}/cascade/showCitys",type:"GET",data:"provincecode="+110000,dataType:"json",success:function (citys) {//每次添加清空$("#city").empty();//渲染该省份对应的市for (var i=0;i<citys.length;i++){var option=$("<option value="+citys[i].code+">"+citys[i].name+"</option>")$("#city").append(option);}//把第一个市对应的第一个区展示在第三个下拉框中$.ajax({url:"${pageContext.request.contextPath}/cascade/showAreas",type:"GET",data:"citycode="+110100, //把第一个市对应的code传入dataType:"json",success:function (areas) {$("#area").empty();for (var i=0;i<areas.length;i++){var option=$("<option>"+areas[i].name+"</option>");$("#area").append(option);}}})}})}});//给第一个省份的下拉框添加onchange事件$("#province").change(function () {//获取用户选中的codevar provincecode=$("#province :selected").val();//把省份code传入后台$.ajax({url:"${pageContext.request.contextPath}/cascade/showCitys",type:"GET",data:"provincecode="+provincecode,dataType:"json",success:function (citys) {//每次添加清空$("#city").empty();//渲染该省份对应的市for (var i=0;i<citys.length;i++){var option=$("<option value="+citys[i].code+">"+citys[i].name+"</option>")$("#city").append(option);}//把第一个市对应的第一个区展示在第三个下拉框中$.ajax({url:"${pageContext.request.contextPath}/cascade/showAreas",type:"GET",data:"citycode="+citys[0].code, //把第一个市对应的code传入dataType:"json",success:function (areas) {$("#area").empty();for (var i=0;i<areas.length;i++){var option=$("<option>"+areas[i].name+"</option>");$("#area").append(option);}}})}})});//给第二个下拉框填充change事件$("#city").change(function () {//获取选中的citycodevar citycode= $("#city option:selected").val();$.ajax({url:"${pageContext.request.contextPath}/cascade/showAreas",type:"GET",data:"citycode="+citycode,dataType:"json",success:function (areas) {$("#area").empty();for (var i=0;i<areas.length;i++){var option=$("<option>"+areas[i].name+"</option>");$("#area").append(option);}}})})})</script>
</head>
<body>
<select id="province">
</select>
<select id="city">
</select>
<select id="area">
</select>
</body>
</html>
一级菜单
public class ProvinceAction extends ActionSupport {public String showAllProvinces(){ProvinceService ps=new ProvinceServiceImpl();//获取到所有省份List<Province> provinces = ps.showProvinces();//把List集合转换为JSON协议串String jsonString = JSON.toJSONString(provinces);HttpServletResponse response = ServletActionContext.getResponse();response.setCharacterEncoding("UTF-8");try {PrintWriter out = response.getWriter();out.print(jsonString);} catch (IOException e) {e.printStackTrace();}return null;}
}
二级菜单
public class CityAction extends ActionSupport {//接受省份code provincecodeprivate String provincecode;public String getProvincecode() {return provincecode;}public void setProvincecode(String provincecode) {this.provincecode = provincecode;}public String showCitys(){CityService cs= new CityServiceImpl();//查询该省份对应的所有的市List<City> cities = cs.showCitys(provincecode);//把List集合转换为JSON协议串String jsonString = JSON.toJSONString(cities);HttpServletResponse response = ServletActionContext.getResponse();response.setCharacterEncoding("UTF-8");try {PrintWriter out = response.getWriter();out.print(jsonString);} catch (IOException e) {e.printStackTrace();}return null;}
}
三级菜单
public class AreaAction extends ActionSupport {//接收citycodeprivate String citycode;public String getCitycode() {return citycode;}public void setCitycode(String citycode) {this.citycode = citycode;}public String showAreas(){AreaService as=new AreaServiceImpl();List<Area> areas = as.showAreas(citycode);//把List集合转换为JSON协议串String jsonString = JSON.toJSONString(areas);HttpServletResponse response = ServletActionContext.getResponse();response.setCharacterEncoding("UTF-8");try {PrintWriter out = response.getWriter();out.print(jsonString);} catch (IOException e) {e.printStackTrace();}return null;}
}
实体类
public class Area {private Integer id;private String code;private String name;private String citycode;public class City {private Integer id;private String code;private String name;private String provincecode;public class Province {private Integer id;private String code;private String name;这篇关于web项目的菜单展示-三级联动菜单展示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
