Ajax实现二级联动菜单

<%

@ 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 >

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

{

}

}

<? 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 >