三级联动JQuery
源码地址：
省市区三千条Sql数据：
拼接式：
$(function(){
$.post(
'province.do',
function(objs){
var province=$('#pid');
for(var i=0;i<objs.length;i++){
var pid=objs[i].pid;
var pname=objs[i].pname;
province.append("<option value='"+pid+"'>"+pname+"</option>");
}
},'json'
);
})
$(function(){
$("#pid").change(function(){
var city=$("#cid");
$('#cid option:gt(0)').remove();
var pro=$(this).val();
$.post(
'city.do?pid='+pro,
function(objs){
for(var i=0;i<objs.length;i++){
var pid=objs[i].cid;
var pname=objs[i].cname;
city.append("<option value='"+pid+"'>"+pname+"</option>");
}
},'json'
)
});
})
$(function(){
$("#cid").change(function(){
var area=$("#aid");
$('#aid option:gt(0)').remove();
var pro=$(this).val();
$.post(
'area.do?cid='+pro,
function(objs){
for(var i=0;i<objs.length;i++){
var pid=objs[i].aid;
var pname=objs[i].aname;
area.append("<option value='"+pid+"'>"+pname+"</option>");
}
},'json'
)
})
})前端代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
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>
<title>三级联动</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/address.js"></script>
</head>
<body>
<select id="pid" onchange="getCity()">
<option>省</option>
</select>
<select id="cid" onchange="getArea()">
<option>市</option>
</select>
<select id="aid">
<option>区</option>
</select>
</body>
</html>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<welcome-file-list>
<welcome-file>hc.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>area</servlet-name>
<servlet-class>com.hc.servlet.area</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>area</servlet-name>
<url-pattern>/area.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>city</servlet-name>
<servlet-class>com.hc.servlet.city</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>city</servlet-name>
<url-pattern>/city.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>province</servlet-name>
<servlet-class>com.hc.servlet.province</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>province</servlet-name>
<url-pattern>/province.do</url-pattern>
</servlet-mapping>
</web-app>