JQuery+Ajax实现省市区三级联动菜单（附数据库表）

朴灿烈づ我的快乐病毒、 2021-12-19 19:59 578阅读 0赞

# 省市区三级联动菜单 #

一、首先是JSP页面：

<%@ page pageEncoding="utf-8"%>
    <html>
    <head>
    <title>省市级三级联动菜单</title>
    <script type="text/javascript"
    	src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    	$(function() { 
    		//页面加载后
    		$.get("${pageContext.request.contextPath}/pro/queryAllProvince",
    				function(res) { 
    					for (var i = 0; i < res.length; i++) { 
    						$("#selProvince").append(
    								$("<option value='"+res[i].code+"'>"+ res[i].name + "</option>")
    								);						
    					}
    					
    					$("selProvince").change();
    				}, "json");
    		//给selProvince，绑定change事件
    		$("#selProvince").change(function(){ 
    				// 发ajax 根据选中的省，查其下的 市
    				$.get("${pageContext.request.contextPath}/pro/queryAllCityByPro",
    					"procode="+$(this).val(),
    					function(res){ 
    						$("#selCity").empty(); // 清空原内容
    						for(var i=0; i<res.length; i++){ 
    							$("#selCity").append($("<option value='"+res[i].code+"'>"+res[i].name+"</option>"));
    						}
    						$("#selCity").change();
    					},
    					"json");
    			});
    		$("#selCity").change(function(){ 
    			$.get("${pageContext.request.contextPath}/pro/queryAllAreaByCity",
    				"cityid="+$("#selCity").val(),
    				function (res) { 
    					$("#selArea").empty(); 
    					//$("#selArea").find("option").remove(); 
    					//$("select[id='selArea']").empty();
    					for(var i=0; i<res.length; i++){ 
    							$("#selArea").append($("<option value='"+res[i].code+"'>"+res[i].name+"</option>"));
    						}
    				},
    				"json");	
    		});
    		});
    </script>
    </head>
    <body>
    	<select id="selProvince"></select>
    	<select id="selCity"></select>
    	<select id="selArea"></select>
    </body>
    </html>

二、Action层代码：

//成员变量接受参数
    	private String procode;
    	private String cityid;
    	//查询所有的省
    	public String queryAllProvince() throws Exception { 
    		ProvinceService provinceService = new ProvinceServiceImpl();
    		List<Province> provincelist = provinceService.queryAllProvince();
    		String jsonString = JSON.toJSONString(provincelist);
    		HttpServletResponse response = ServletActionContext.getResponse();
    		response.setContentType("application/json;charset=utf-8");
    		PrintWriter out = response.getWriter();
    		out.print(jsonString);
    		return null;
    	}
    	//根据选择的省查询市
    	public String queryAllCityByPro() throws Exception { 
    		System.out.println("-----------"+procode);
    		CityService cityService = new CityServiceImpl();
    		List<City> queryAllCityByPro = cityService.queryAllCityByPro(procode);
    		String jsonString = JSON.toJSONString(queryAllCityByPro);
    		HttpServletResponse response = ServletActionContext.getResponse();
    		response.setContentType("application/json;charset=utf-8");
    		PrintWriter out = response.getWriter();
    		out.print(jsonString);
    		return null;
    	}
    	//根据选择市查询区
    	public String queryAllAreaByCity() throws Exception { 
    		AreaService areaService = new AreaServiceImpl();
    		List<Area> queryAllAreaByCity = areaService.queryAllAreaByCity(cityid);
    		String jsonString = JSON.toJSONString(queryAllAreaByCity);
    		HttpServletResponse response = ServletActionContext.getResponse();
    		response.setContentType("application/json;charset=utf-8");
    		PrintWriter out = response.getWriter();
    		out.print(jsonString);
    		return null;
    	}
    	public String getProcode() { 
    		return procode;
    	}
    
    	public void setProcode(String procode) { 
    		this.procode = procode;
    	}
    
    	public String getCityid() { 
    		return cityid;
    	}
    
    	public void setCityid(String cityid) { 
    		this.cityid = cityid;
    	}

三、数据库建表：

-- 表的结构 province
        CREATE TABLE province (
          id numeric(11) primary key,
          code varchar2(6) NOT NULL,
          name varchar2(30) NOT NULL
        ) 
        -- 表的结构 city
        CREATE TABLE city (
          id numeric(11) primary key,
          code varchar2(6) NOT NULL,
          name varchar2(50) NOT NULL,
          provincecode varchar2(6) NOT NULL
        ) 
        -- 表的结构 area
        CREATE TABLE  area (
          id numeric(11) primary key,
          code varchar2(6) NOT NULL,
          name varchar2(50) NOT NULL,
          citycode varchar2(6) NOT NULL
        )

省、市、区三张数据表的部分截图：

省份表：  
![在这里插入图片描述][20190630210450871.png]  
城市表：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzcxMzIz_size_16_color_FFFFFF_t_70]  
区县表：  
![在这里插入图片描述][20190630210523730.png]  
四、效果图：  
![在这里插入图片描述][20190630210536324.png]

[20190630210450871.png]: /images/20211219/a7ac3365e04a43d1b4ea877c1f9891f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzcxMzIz_size_16_color_FFFFFF_t_70]: /images/20211219/20007b3abe09485d9c467594973bd30e.png
[20190630210523730.png]: /images/20211219/6510ef3c4e3f4cc1bbebf552de19f519.png
[20190630210536324.png]: /images/20211219/e1a1a3854eb3424e926150aac5778de3.png