省市区三级级联实现

最新推荐文章于 2023-03-29 17:53:58 发布

中国GZ

最新推荐文章于 2023-03-29 17:53:58 发布

阅读量241

点赞数

文章标签： js json jquery

本文链接：https://blog.csdn.net/Gong_Zheng6/article/details/107616826

版权

项目结构：

index:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>Insert title here</title>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="js/json2.js"></script>
		<script type="text/javascript">
		$(function(){
				var obj={
					url:"./CascadeServlet",
					dataType: "text",
					success:function(data){
						 data = JSON.parse(data); 
						 var options = "<option value=\"\">---请选择---</option>";
						 for(var i=0;i<data.length;i++){
							options = options +"<option value='"+data[i].code+"'>"+data[i].name+"</option>";
						 }   
						 $("#province").empty();
						 $("#province").append(options);
					}
				};
				$.ajax(obj);
			
		});
			function provinceChange(){
				var values = $("#province").val();
				if(values==""){
					$("#city").empty();
					$("#county").empty();
					var options = "<option value=\"\">---请选择---</option>";
					$("#city").append(options);
					$("#county").append(options);
					return;
				}
				var obj={
						url:"./CascadeServlet?parentCode="+values,
						dataType: "text",
						success:function(data){
							 data = JSON.parse(data); 
							 var options = "<option value=\"\">---请选择---</option>";
							 for(var i=0;i<data.length;i++){
								options = options +"<option value='"+data[i].code+"'>"+data[i].name+"</option>";
							 }   
							 $("#city").empty();
							 $("#city").append(options);
						}
					};
					$.ajax(obj);
			}
			function cityChange(){
				var values = $("#city").val();
				if(values==""){
					$("#county").empty();
					var options = "<option value=\"\">---请选择---</option>";
					$("#county").append(options);
					return;
				}
				var obj={
						url:"./CascadeServlet?parentCode="+values,
						dataType: "text",
						success:function(data){
							 data = JSON.parse(data); 
							 var options = "<option value=\"\">---请选择---</option>";
							 for(var i=0;i<data.length;i++){
								options = options +"<option value='"+data[i].code+"'>"+data[i].name+"</option>";
							 }   
							 $("#county").empty();
							 $("#county").append(options);
						}
					};
					$.ajax(obj);
			}
		</script>
	</head>
	<body>
		<select id="province" onchange="provinceChange()">
			<option value="">---请选择---</option>
		</select>
		<select id="city" onchange="cityChange()">
			<option value="">---请选择---</option>
		</select>
		<select id="county">
			<option value="">---请选择---</option>
		</select>
	</body>
</html>

CascadeServlet：

package com.jd.area.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
import com.jd.area.service.AreaService;
import com.jd.area.vo.Area;


public class CascadeServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/plaint; charset=UTF-8");
		String parentCode = request.getParameter("parentCode");
		AreaService areaService = new AreaService();
		List<Area> LIST = areaService.areaService(parentCode);
		String json = new Gson().toJson(LIST); //json 一种数据存储的结构，以字符串为数据类型，该字符串返回到浏览器端后变成javascript对象
		PrintWriter out = response.getWriter();
		out.write(json);
		out.flush();
		out.close();
	}

}

AreaService：

package com.jd.area.service;

import java.util.List;

import com.jd.area.dao.AreaDao;
import com.jd.area.imp.IAreaService;
import com.jd.area.vo.Area;

public class AreaService implements IAreaService {

	public List<Area> areaService(String parentCode) {
		if(parentCode==null) {
			parentCode="";
		}
		return new AreaDao().areaDao(parentCode);
	}

}

AreaDao：

package com.jd.area.dao;


import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.jd.area.imp.IAreaDao;
import com.jd.area.vo.Area;
import com.jd.tool.db.DBLink;
import com.jd.tool.db.IRowMapper;

public class AreaDao implements IAreaDao{

	public List<Area> areaDao(String parentCode) {
		String sql = "select * from area where parent_code ='"+parentCode+"'";
		final List <Area> LIST = new ArrayList<Area>();
		DBLink dblink = new DBLink();
		dblink.select(sql, new IRowMapper() {
			public void rowMapper(ResultSet rs) {
				try {
					while(rs.next()) {
						String name = rs.getString("name");
						String code = rs.getString("code");
						String parentCode = rs.getString("parent_code");
						String id = rs.getString("id");
						Area area = new Area(name,code,parentCode,id);
						LIST.add(area);
					}
				} catch (SQLException e) {
					e.printStackTrace();
				}
			}
		});
		return LIST;
	}
	
}

中国GZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
省市区三级级联实现

项目结构：index:<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html> <head> <title>Insert title here</title> <script type="text/javascript" src="js/jquer
复制链接

扫一扫