http://www.blogjava.net/supercrsky/articles/203698.html
index.jsp:
<%
@ page language="java" pageEncoding="UTF-8"
%>
<
html
>
<
head
>
<
title
>二级
菜单联动演示
</
title
>
<
script
type
="text/javascript"
>
var req;
window.onload=function()
{//页面加载时的函数
}
function Change_Select()
{//当第一个下拉框的选项发生改变时调用该函数
var province = document.getElementById('province').value;
var url ="select?id="+ escape(province);
if(window.XMLHttpRequest)
{
req =new XMLHttpRequest();
}elseif(window.ActiveXObject)
{
req =new ActiveXObject("Microsoft.XMLHTTP");
}
if(req)
{
req.open("GET",url,true);
//指定回调函数为callback
req.onreadystatechange = callback;
req.send(null);
}
}
//回调函数
function callback()
{
if(req.readyState ==4)
{
if(req.status ==200)
{
parseMessage();//解析XML文档
}else
{
alert("不能得到描述信息:"+ req.statusText);
}
}
}
//解析返回xml的方法
function parseMessage()
{
var xmlDoc = req.responseXML.documentElement;//获得返回的XML文档
var xSel = xmlDoc.getElementsByTagName('select');
//获得XML文档中的所有<select>标记
var select_root = document.getElementById('city');
//获得网页中的第二个下拉框
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)
{
}
}
}
</
script
>
</
head
>
<
body
>
<
div
align
="center"
>
<
form
name
="form1"
method
="post"
action
=""
>
<
table
width
="70%"
border
="0"
cellspacing
="0"
cellpadding
="0"
>
<
tr
>
<
td
align
="center"
>
二级联动示例
</
td
>
</
tr
>
<
tr
>
<
td
>
<
select
name
="province"
id
="province"
onChange
="Change_Select()"
>
<!--
第一个下拉菜单
-->
<
option
value
="0"
>
请选择
</
option
>
<
option
value
="1"
>
北京
</
option
>
<
option
value
="2"
>
天津
</
option
>
<
option
value
="3"
>
山东
</
option
>
</
select
>
<
select
name
="city"
id
="city"
>
<!--
第二个下拉菜单
-->
<
option
value
="0"
>
请选择
</
option
>
</
select
>
</
td
>
</
tr
>
<
tr
>
<
td
>
</
td
>
<
tr
>
</
table
>
</
form
>
</
div
>
</
body
>
</
html
>
SelectServlet:
package com;
import java.io.IOException;
import javax.servlet.
servletexception;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/** */
/***
*
* @author zdw
*
*/
public
class SelectServlet
extends HttpServlet
{
privatestaticfinallong serialVersionUID = 1L;
public SelectServlet()
{
super();
}
publicvoid destroy()
{
super.destroy();
}
publicvoid doGet(HttpServletRequest request,HttpServletResponse response)
throws servletexception,IOException
{
// response.setCharacterEncoding("GBK");
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-cache");
request.setCharacterEncoding("GBK");
response.setCharacterEncoding("UTF-8");
String targetId = request.getParameter("id").toString();
System.out.println(targetId);
// 获得请求中参数为id的值
String xml_start = "<selects>";
String xml_end = "</selects>";
String xml = "";
if (targetId.equalsIgnoreCase("0"))
{
xml = "<select><value>0</value><text>请选择</text></select>";
}elseif (targetId.equalsIgnoreCase("1"))
{
xml = "<select><value>1</value><text>昌平</text></select>";
xml += "<select><value>2</value><text>丰台</text></select>";
xml += "<select><value>3</value><text>海淀</text></select>";
xml += "<select><value>4</value><text>朝阳</text></select>";
}elseif (targetId.equalsIgnoreCase("2"))
{
xml = "<select><value>1</value><text>塘沽区</text></select>";
xml += "<select><value>2</value><text>汉沽区</text></select>";
xml += "<select><value>3</value><text>大港区</text></select>";
xml += "<select><value>4</value><text>东丽区</text></select>";
}else
{// 如果是3,则返回下面的字符
xml = "<select><value>1</value><text>济南</text></select>";
xml += "<select><value>2</value><text>青岛</text></select>";
xml += "<select><value>3</value><text>淄博</text></select>";
xml += "<select><value>4</value><text>枣庄</text></select>";
}
String last_xml = xml_start + xml + xml_end;
response.getWriter().write(last_xml);
}
publicvoid doPost(HttpServletRequest request,IOException
{
doGet(request,response);
}
publicvoid init() throws servletexception
{
}
}
web.xml:
<?
xml version="1.0" encoding="UTF-8"
?>
<
web-app
version
="2.4"
xmlns
="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi
="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation
="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
>
<
servlet
>
<
servlet-name
>SelectServlet
</
servlet-name
>
<
servlet-class
>com.SelectServlet
</
servlet-class
>
</
servlet
>
<
servlet-mapping
>
<
servlet-name
>SelectServlet
</
servlet-name
>
<
url-pattern
>/select
</
url-pattern
>
</
servlet-mapping
>
<
welcome-file-list
>
<
welcome-file
>index.jsp
</
welcome-file
>
</
welcome-file-list
>
</
web-app
>
