php ajax二级联动下拉列表,Ajax二级联动菜单实现原理及代码

二级联动菜单,一个多么方便且实用的用户交互功能，有需求的朋友可以参考下本文，或许对你的菜单知识深入学习有帮助，好了，闲话不多说，看代码吧

index.jsp:

二级菜单联动演示

var req;

window.οnlοad=function()

{//页面加载时的函数

}

function Change_Select(){//当第一个下拉框的选项发生改变时调用该函数

var province = document.getElementById('province').value;

var url = "select?id="+ escape(province);

if(window.XMLHttpRequest){

req = new XMLHttpRequest();

}else if(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文档中的所有标记

var select_root = document.getElementById('city');

//获得网页中的第二个下拉框

select_root.options.length=0;

//每次获得新的数据的时候先把每二个下拉框架的长度清0

for(var i=0;i

var xValue = xSel[i].childNodes[0].firstChild.nodeValue;

//获得每个标记中的第一个标记的值,也就是标记的值

var xText = xSel[i].childNodes[1].firstChild.nodeValue;

//获得每个标记中的第二个标记的值,也就是标记的值

var option = new Option(xText, xValue);

//根据每组value和text标记的值创建一个option对象

try{

select_root.add(option);//将option对象添加到第二个下拉框中

}catch(e){

}

}

}

二级联动示例

请选择 北京 天津 山东 请选择

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

{

private static final long serialVersionUID = 1L;

public SelectServlet()

{

super();

}

public void destroy()

{

super.destroy();

}

public void 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 = "";

String xml_end = "";

String xml = "";

if (targetId.equalsIgnoreCase("0"))

{

xml = "0请选择";

} else if (targetId.equalsIgnoreCase("1"))

{

xml = "1昌平";

xml += "2丰台";

xml += "3海淀";

xml += "4朝阳";

} else if (targetId.equalsIgnoreCase("2"))

{

xml = "1塘沽区";

xml += "2汉沽区";

xml += "3大港区";

xml += "4东丽区";

} else

{// 如果是3,则返回下面的字符

xml = "1济南";

xml += "2青岛";

xml += "3淄博";

xml += "4枣庄";

}

String last_xml = xml_start + xml + xml_end;

response.getWriter().write(last_xml);

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException

{

doGet(request, response);

}

public void init() throws ServletException

{

}

}

web.xml:

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

SelectServlet

com.SelectServlet

SelectServlet

/select

index.jsp