省市二级联动实现，网上找了好多，终于实现了。这里用的是数据库链接查询并用XML方式返回。（用的数据池）
1.、编写的index.jsp。
Java代码
1. <%@ page language="java" import="java.util.*,com.dao.*" pageEncoding="UTF-8"%>
2. <%@ page import="com.vo.*" %>
3. <% //这个是调用dao层返回市表中的内容。
4. new UserDao();
5. ArrayList<Sheng> list=(ArrayList)ud.seclect();
6. %>
7.
8. <html>
9. <head>
10. "text/javascript" src="js/test.js"></script>
11.
12. 'index.jsp' starting page</title>
13.
14.
15. </head>
16.
17. <body>
18. "post" name="form1" action="">
19.
20. "slt1" onchange="updateSelect()">
21. <option>请选择省份</option>
22. <%
23. null;
24. for(int i=0;i<list.size();i++)
25. {
26.
27. sheng=(Sheng)list.get(i);
28. %>
29. "<%=sheng.getId()%>"><%=sheng.getName() %></option>
30. <%
31. }
32. %>
33. </select>
34.
35. "slt2">
36. "">请选择地市</option>
37. </select>
38. </form>
39.
40. </body>
41. </html><%@ page language="java" import="java.util.*,com.dao.*" pageEncoding="UTF-8"%>
<%@ page import="com.vo.*" %>
<% //这个是调用dao层返回市表中的内容。
UserDao ud=new UserDao();
ArrayList<Sheng> list=(ArrayList)ud.seclect();
%>
<html>
<head>
<script type="text/javascript" src="js/test.js"></script>
<title>My JSP 'index.jsp' starting page</title>
</head>
<body>
<form method="post" name="form1" action="">
<select id="slt1" onchange="updateSelect()">
<option>请选择省份</option>
<%
Sheng sheng=null;
for(int i=0;i<list.size();i++)
{
sheng=(Sheng)list.get(i);
%>
<option value="<%=sheng.getId()%>"><%=sheng.getName() %></option>
<%
}
%>
</select>
<select id="slt2">
<option value="">请选择地市</option>
</select>
</form>
</body>
</html>2、编写js代码。
Java代码
1. function getXmlHttpRequestObject() {
2. if (window.XMLHttpRequest) {
3. return new XMLHttpRequest();
4. else {
5. if (window.ActiveXObject) {
6. return new ActiveXObject("Microsoft.XMLHTTP");
7. else {
8. }
9. }
10. }
11. function createAjaxObj() {
12. false;
13. if (window.XMLHttpRequest) {
14. new XMLHttpRequest();
15. if (httprequest.overrideMimeType) {
16. "text/xml");
17. }
18. else {
19. if (window.ActiveXObject) {
20. try {
21. new ActiveXObject("Msxml2.XMLHTTP");
22. }
23. catch (e) {
24. try {
25. new ActiveXObject("Microsoft.XMLHTTP");
26. }
27. catch (e) {
28. }
29. }
30. }
31. }
32. return httprequest;
33. }
34. var httpReq = createAjaxObj();
35. //上边的代码是固定的。
36.
37. function updateSelect(){
38. var selected = document.all.slt1.value;
39. "GET","testU?tid="+selected,false);
40. httpReq.onreadystatechange=function(){
41. checkReqCallBack();
42. };
43. null);
44. }
45.
46. function checkReqCallBack(){
47. if(httpReq.readyState == 4) {
48. if(httpReq.status ==200){
49. //获得返回的XML文档
50. 'select');
51. //获得XML文档中的所有<select>标记
52. 'slt2');
53. //获得网页中的第二个下拉框
54. 0;
55. //每次获得新的数据的时候先把每二个下拉框架的长度清0
56.
57. for(var i=0;i<xSel.length;i++){
58. 0].firstChild.nodeValue;
59. //获得每个<select>标记中的第一个标记的值,也就是<value>标记的值
60. 1].firstChild.nodeValue;
61. //获得每个<select>标记中的第二个标记的值,也就是<text>标记的值
62.
63. new Option(xText, xValue);
64. //根据每组value和text标记的值创建一个option对象
65.
66. try{
67. //将option对象添加到第二个下拉框中
68. catch(e){
69. }
70. }
71. else{
72. "不能得到描述信息:" + req.statusText);
73. }
74. }
75. }
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
}
}
}
function createAjaxObj() {
var httprequest = false;
if (window.XMLHttpRequest) {
httprequest = new XMLHttpRequest();
if (httprequest.overrideMimeType) {
httprequest.overrideMimeType("text/xml");
}
} else {
if (window.ActiveXObject) {
try {
httprequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httprequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
}
}
}
}
return httprequest;
}
var httpReq = createAjaxObj();
//上边的代码是固定的。
function updateSelect(){
var selected = document.all.slt1.value;
httpReq.open("GET","testU?tid="+selected,false);
httpReq.onreadystatechange=function(){
checkReqCallBack();
};
httpReq.send(null);
}
function checkReqCallBack(){
if(httpReq.readyState == 4) {
if(httpReq.status ==200){
var xmlDoc = httpReq.responseXML.documentElement;//获得返回的XML文档
var xSel = xmlDoc.getElementsByTagName('select');
//获得XML文档中的所有<select>标记
var select_root = document.getElementById('slt2');
//获得网页中的第二个下拉框
select_root.options.length=0;
//每次获得新的数据的时候先把每二个下拉框架的长度清0
for(var i=0;i<xSel.length;i++){
var xValue = xSel[i].childNodes[0].firstChild.nodeValue;
//获得每个<select>标记中的第一个标记的值,也就是<value>标记的值
var xText = xSel[i].childNodes[1].firstChild.nodeValue;
//获得每个<select>标记中的第二个标记的值,也就是<text>标记的值
var option = new Option(xText, xValue);
//根据每组value和text标记的值创建一个option对象
try{
select_root.add(option);//将option对象添加到第二个下拉框中
}catch(e){
}
}
}else{
alert("不能得到描述信息:" + req.statusText);
}
}
}function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
}
}
}
function createAjaxObj() {
var httprequest = false;
if (window.XMLHttpRequest) {
httprequest = new XMLHttpRequest();
if (httprequest.overrideMimeType) {
httprequest.overrideMimeType("text/xml");
}
} else {
if (window.ActiveXObject) {
try {
httprequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httprequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
}
}
}
}
return httprequest;
}
var httpReq = createAjaxObj();
//上边的代码是固定的。
function updateSelect(){
var selected = document.all.slt1.value;
httpReq.open("GET","testU?tid="+selected,false);
httpReq.onreadystatechange=function(){
checkReqCallBack();
};
httpReq.send(null);
}
function checkReqCallBack(){
if(httpReq.readyState == 4) {
if(httpReq.status ==200){
var xmlDoc = httpReq.responseXML.documentElement;//获得返回的XML文档
var xSel = xmlDoc.getElementsByTagName('select');
//获得XML文档中的所有<select>标记
var select_root = document.getElementById('slt2');
//获得网页中的第二个下拉框
select_root.options.length=0;
//每次获得新的数据的时候先把每二个下拉框架的长度清0
for(var i=0;i<xSel.length;i++){
var xValue = xSel[i].childNodes[0].firstChild.nodeValue;
//获得每个<select>标记中的第一个标记的值,也就是<value>标记的值
var xText = xSel[i].childNodes[1].firstChild.nodeValue;
//获得每个<select>标记中的第二个标记的值,也就是<text>标记的值
var option = new Option(xText, xValue);
//根据每组value和text标记的值创建一个option对象
try{
select_root.add(option);//将option对象添加到第二个下拉框中
}catch(e){
}
}
}else{
alert("不能得到描述信息:" + req.statusText);
}
}
}3、编写的servlet。
Java代码
1. package com.servlet;
2.
3.
4.
5. import java.io.IOException;
6. import java.util.ArrayList;
7.
8. import javax.servlet.ServletException;
9. import javax.servlet.http.HttpServlet;
10. import javax.servlet.http.HttpServletRequest;
11. import javax.servlet.http.HttpServletResponse;
12.
13. import com.dao.UserDao;
14. import com.vo.Shi;
15.
16. public class TestU extends HttpServlet {
17. public String tid;
18.
19.
20. private static final long serialVersionUID = 1L;
21.
22.
23. public void doGet(HttpServletRequest request, HttpServletResponse response)
24. throws ServletException, IOException {
25. new UserDao();
26. try {
27. "GBK");
28. "text/xml");
29. "Cache-Control", "no-cache");
30. "GBK");
31. "UTF-8");
32.
33. "tid").toString();
34. ArrayList<?> list=ud.check(tid);
35. "<selects>";
36. "</selects>";
37. "";
38. null;
39. for(int i=0;i<list.size();i++){
40. new Shi();
41. shi=(Shi) list.get(i);
42. "<select><value>"+shi.getId()+"</value><text>"+shi.getName()+"</text></select>";
43. }
44. String last_xml = xml_start + xml + xml_end;
45. response.getWriter().write(last_xml);
46.
47. catch (Exception e) {
48. e.printStackTrace();
49. }
50.
51. }
52.
53.
54. public void doPost(HttpServletRequest request, HttpServletResponse response)
55. throws ServletException, IOException {
56.
57. doGet(request,response);
58. }
59.
60. }package com.servlet;
import java.io.IOException;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.dao.UserDao;
import com.vo.Shi;
public class TestU extends HttpServlet {
public String tid;
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
UserDao ud=new UserDao();
try {
response.setCharacterEncoding("GBK");
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
request.setCharacterEncoding("GBK");
response.setCharacterEncoding("UTF-8");
tid=request.getParameter("tid").toString();
ArrayList<?> list=ud.check(tid);
String xml_start = "<selects>";
String xml_end = "</selects>";
String xml = "";
Shi shi=null;
for(int i=0;i<list.size();i++){
shi=new Shi();
shi=(Shi) list.get(i);
xml+="<select><value>"+shi.getId()+"</value><text>"+shi.getName()+"</text></select>";
}
String last_xml = xml_start + xml + xml_end;
response.getWriter().write(last_xml);
} catch (Exception e) {
e.printStackTrace();
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
}总结：当一级省select改变时出发ajax，调用servlet并在servlet中调用dao层返回查找到的市级表，用ArrayList返回给servlet，在servlet中生成XML代码。
在js中用XML方式解析，（1、取得获得XML文档中的所有<select>标记，为以后的迭代准备。2、取得页面的市节点，创建一个option对象，将option对象添加到第二个下拉框中。）。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
