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

最新推荐文章于 2021-08-05 20:21:02 发布

半张饭卡

最新推荐文章于 2021-08-05 20:21:02 发布

阅读量1.3k

点赞数 2

分类专栏：随笔文章标签：级联菜单 Ajax JQuery

本文链接：https://blog.csdn.net/qq_35371323/article/details/94357420

版权

随笔专栏收录该内容

25 篇文章 1 订阅

订阅专栏

省市区三级联动菜单

一、首先是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
    )

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

省份表：
在这里插入图片描述
城市表：

区县表：

四、效果图：

半张饭卡

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JQuery+Ajax实现省市区三级联动菜单（附数据库表）

省市区三级联动菜单一、首先是JSP页面：<%@ page pageEncoding="utf-8"%><html><head><title>省市级三级联动菜单</title><script type="text/javascript" src="${pageContext.request.contextPath}/js...
复制链接

扫一扫

专栏目录