发表评论
JSP 页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()
+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'province.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script >
$(document).ready(function(){
$("#province").change(fillCity);
$.getJSON("ProvinceServlet",function(data){
$.each(data,function(i){
$("<option></option>").val(data[i].id).html(data[i].name).appendTo($("#province"));
});
});
});
function fillCity(){
$("#city").empty(); //删除匹配的元素集合中所有的子节点。
var province=$("#province").val();
$.getJSON("CityServlet?province="+province,function(data){
$.each(data,function(i){
$("<option></option>").val(data[i].id).html(data[i].name).appendTo($("#city"));
});
});
}
</script>
</head>
<body>
省 :<select id="province" name="province"></select>
市 :<select id="city" name="city"></select>
</body>
</html>
ProvinecServlet代码
package com.chen.web.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
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 {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.println("[{id:\"1\",name:\"北京\"},{id:\"2\",name:\"天津\"},{id:\"3\",name:\"上海\"}]");
out.flush();
out.close();
}
}
CityServlet 代码:
package com.chen.web.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
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 {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
String province = request.getParameter("province")
PrintWriter out = response.getWriter();
if("1".equals(province)){ //根据得到的province不同返回不同的json市参数
out.println("[{id:\"1\",name:\"海淀区\"},{id:\"2\",name:\"朝阳区\"},{id:\"3\",name:\"丰台区\"}]");
}else if("2".equals(province)){
out.println("[{id:\"1\",name:\"厦门市\"},{id:\"2\",name:\"龙岩市\"},{id:\"3\",name:\"福州市\"}]");
}else if("3".equals(province)){
out.println("[{id:\"1\",name:\"海淀区\"},{id:\"2\",name:\"朝阳区\"},{id:\"3\",name:\"丰台区\"}]");
}
out.flush();
out.close();
}
}
这样一个简单的省市级联就完成了，这里使用的是servlet返回的固定数据，大家可以根据自己的需要进行相应的修改就行了。