首先先看一下要做出来的效果： 之前想用js+Ajax异步做出来，但是写着写着就写乱了 这次用的是jQuery+JSON 废话不多说，直接开工， 首页说一下数据库: 三个表： province表: city表： count
首先先看一下要做出来的效果：
之前想用js+Ajax异步做出来，但是写着写着就写乱了
这次用的是jQuery+JSON
废话不多说，直接开工，
首页说一下数据库:
三个表：
province表:
city表：
county表：
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页面上
自己学的还不是很好，恳请大家赐教