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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。