首先先看一下要做出来的效果：

de180390778bd1ca207e831a471de3e0.png-wh_

之前想用js+Ajax异步做出来，但是写着写着就写乱了

这次用的是jQuery+JSON

废话不多说，直接开工，

首页说一下数据库:

三个表：

province表:

c204d23dd313a0a41d4cd0dbf2447d53.png-wh_

city表：

e52550a82f0ba952850a925b83d6e69b.png-wh_

county表：

34a955252fcc55293d97ca9e1b23eaca.png-wh_

jsp页面代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>   
    <title>三级联动</title>
	<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
	<script type="text/javascript" src="js/jquery.js"></script>
  </head>
  <body>
  	<div>
  		<select id="province">
	  		<option value="0" >--请选择省份--</option>
	  	</select>
	  	<select id="city">
	  		<option value="0">--请选择城市--</option>
	  	</select>
	  	<select id="county">
	  		<option value="0">--请选择地区--</option>
	  	</select>
  	</div>
  </body>
</html>

jQuery:

$(function(){
//	alert("进来了");
	$.getJSON(
			"ProvinceServlet",
			function(msg){
//				alert(msg);
				var popt=$("#province");
				for(var i=0;i<msg.length;i++){
					var province_id=msg[i].province_id;
					var province_name=msg[i].province_name;
					popt.append("<option value="+province_id+">"+province_name+"</option>");
				}
			}
	);
	
	$("#province").change(function(){
//		alert("进来了city");
		var province_id=$(this).val();
		if(province_id!=0){
			$.getJSON(
					"CityServlet",
					{province_id:province_id},//传参
					function(msg){
//						alert(msg);
						var cobj=$("#city");
						cobj.empty();
						cobj.append("<option value='0'>---请选择城市---</option>");
						for(var i=0;i<msg.length;i++){
							cobj.append("<option value='"+msg[i].city_id+"'>"+msg[i].city_name+"</option>");
						}
					}
					
					
			);
		}
	});
	
	$("#city").change(function(){
		var city_id=$(this).val();
		if(city_id!=0){
			$.getJSON(
					"CountyServlet",
					{city_id:city_id},
					function(msg){
						var county=$("#county");
						county.empty();
						county.append("<option value='0'>---请选择地区---</option>");//先清空这个select里面所有的option内容，然后再进行添加一次，是为了防止当重复点击select时出现重复的option
						for(var i=0;i<msg.length;i++){
							county.append("<option value="+msg[i].county_id+">"+msg[i].county_name+"</option>");
						}
					}
			);
		}
	})
	
})

servlet:

package 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 net.sf.json.JSONArray;

import dao.ProvinceDao;

import entity.Province;

/**
 * provinceservlet
 * @author Administrator
 *
 */
public class ProvinceServlet extends HttpServlet {


	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);

	}


	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		List<Province> proList=new ProvinceDao().getAllProvince();//这个getAllProvince()写在dao包里面的ProvinceDao里面，查询出所有的province省份
		
		JSONArray jsonList=JSONArray.fromObject(proList);
		
		response.setContentType("text/html;charset=UTF-8;");
		PrintWriter out=response.getWriter();
		out.println(jsonList);

	}

}
package servlet;

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

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

import net.sf.json.JSONArray;

import dao.CityDao;

import entity.City;

public class CityServlet extends HttpServlet {


	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		int province_id=Integer.parseInt(request.getParameter("province_id"));
		List<City> cityAll=new ArrayList<City>();
		cityAll=new CityDao().getCityListById(province_id);//这个getCityListById()写在dao包里面的CityDao里面，根据province_id查询出所有的city市
		
		JSONArray json=JSONArray.fromObject(cityAll);
		
		response.setContentType("text/html;charset=UTF-8;");
		PrintWriter out=response.getWriter();
		out.println(json);
	}

}
package 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 net.sf.json.JSONArray;

import dao.CountyDao;

import entity.County;

public class CountyServlet extends HttpServlet {


	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}


	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		int city_id=Integer.parseInt(request.getParameter("city_id"));
		List<County> countyList=new CountyDao().getCountyListById(city_id);////这个getCountyListById写在dao包里面的CountyDao里面，根据city_id查询出所有的county地区
		
		JSONArray json=JSONArray.fromObject(countyList);
		
		response.setContentType("text/html;charset=UTF-8;");
		PrintWriter out=response.getWriter();
		out.println(json);
	}

}

这里面dao包,entity包,就没有放出来代码了，相信大家都能写出来的

思路大概是：当用户点击select的时候，从数据库查询相应的数据呈现在jsp页面上

自己学的还不是很好，恳请大家赐教