index.jsp:

二級(jí)菜單聯(lián)動(dòng)演示

var req;

window.οnlοad=function()

{//頁(yè)面加載時(shí)的函數(shù)

}

function Change_Select(){//當(dāng)?shù)谝粋€(gè)下拉框的選項(xiàng)發(fā)生改變時(shí)調(diào)用該函數(shù)

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);

//指定回調(diào)函數(shù)為callback

req.onreadystatechange = callback;

req.send(null);

}

}

//回調(diào)函數(shù)

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文檔中的所有標(biāo)記

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

//獲得網(wǎng)頁(yè)中的第二個(gè)下拉框

select_root.options.length=0;

//每次獲得新的數(shù)據(jù)的時(shí)候先把每二個(gè)下拉框架的長(zhǎng)度清0

for(var i=0;i

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

//獲得每個(gè)標(biāo)記中的第一個(gè)標(biāo)記的值,也就是標(biāo)記的值

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

//獲得每個(gè)標(biāo)記中的第二個(gè)標(biāo)記的值,也就是標(biāo)記的值

var option = new Option(xText, xValue);

//根據(jù)每組value和text標(biāo)記的值創(chuàng)建一個(gè)option對(duì)象

try{

select_root.add(option);//將option對(duì)象添加到第二個(gè)下拉框中

}catch(e){

}

}

}

二級(jí)聯(lián)動(dòng)示例

請(qǐng)選擇 北京 天津 山東 請(qǐng)選擇

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);

// 獲得請(qǐng)求中參數(shù)為id的值

String xml_start = "";

String xml_end = "";

String xml = "";

if (targetId.equalsIgnoreCase("0"))

{

xml = "0請(qǐng)選擇";

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

{

xml = "1昌平";

xml += "2豐臺(tái)";

xml += "3海淀";

xml += "4朝陽(yáng)";

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

{

xml = "1塘沽區(qū)";

xml += "2漢沽區(qū)";

xml += "3大港區(qū)";

xml += "4東麗區(qū)";

} else

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

xml = "1濟(jì)南";

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

總結(jié)

以上是生活随笔為你收集整理的ajax二级联动源代码,Ajax二级联动菜单实现原理及代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。