province_city_area.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
<select id="provinceID">
<option>选择省份</option>
<option>湖南</option>
<option>广东</option>
<option>湖北</option>
</select>
<hr/>
<select id="cityID">
<option>选择城市</option>
</select>
<hr/>
<select id="areaID">
<option>选择区域</option>
</select>
<script type="text/javascript">
//省份-城市
$("#provinceID").change(function(){
//清空城市下拉框中的内容，除提示信息外
$("#cityID option:gt(0)").remove();
$("#areaID option:gt(0)").remove();
//获取选中的省份
var province = $("#provinceID option:selected").html();
var url = "${pageContext.request.contextPath}/ProvinceCityAreaJsonServlet?time="+new Date().getTime();
var sendData = {"province":province,"method":"provinceToCity"};
$.post(url,sendData,function(backData,textStatus,xhr){
//解析字符串
var jsonString = eval("("+backData+")");
var size = jsonString.city.length;
for(var i=0;i<size;i++){
//获取每一个城市
var city = jsonString.city[i];
var $option = $("<option>" + city + "</option>")
$("#cityID").append( $option );
}
});
});
//城市-区域
$("#cityID").change(function(){
$("#areaID option:gt(0)").remove();
var city = $("#cityID option:selected").html();
var url = "${pageContext.request.contextPath}/ProvinceCityAreaJsonServlet?time="+new Date().getTime();
var sendData = {"city":city,"method":"cityToArea"};
$.post(url,sendData,function(backData,textStatus,xhr){
var jsonString = eval("("+backData+")");
var size = jsonString.area.length;
for(var i=0;i<size;i++){
var area = jsonString.area[i];
var $option = $("<option>" + area + "</option>")
$("#areaID").append( $option );
}
});
});
</script>
</body>
</html>
ProvineCityAreaJsonServlet.java
package cn.itcast.web.servlet; import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class ProvinceCityAreaJsonServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String method = request.getParameter("method");
if("provinceToCity".equals(method)){
this.provinceToCity(request,response);
}else if("cityToArea".equals(method)){
this.cityToArea(request,response);
}
}
//省份到城市
private void provinceToCity(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
String province = request.getParameter("province");
String javaString = null;
if("广东".equals(province)){
javaString = "{city:['广州','深圳']}";
}else if("湖南".equals(province)){
javaString = "{city:['长沙','株洲']}";
}else if("湖北".equals(province)){
javaString = "{city:['武汉','黄冈']}";
}
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(javaString);
}
//城市到区域
private void cityToArea(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
String city = request.getParameter("city");
String javaString = null;
if("广州".equals(city)){
javaString = "{area:['天河','白云']}";
}else if("深圳".equals(city)){
javaString = "{area:['南山','宝安']}";
}else if("长沙".equals(city)){
javaString = "{area:['天心','雨花']}";
}else if("株洲".equals(city)){
javaString = "{area:['雨湖','麓山']}";
}else if("武汉".equals(city)){
javaString = "{area:['汉口','武昌']}";
}else if("黄冈".equals(city)){
javaString = "{area:['红安','黄梅']}";
}
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(javaString);
}
}