您的位置：首页 > 其它

Ajax实现二级联动菜单

2011-12-30 08:14 686 查看

Ajax实现二级联动菜单

原文地址

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




}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文档中的所有<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






{




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 = "<selects>";


String xml_end = "</selects>";


String xml = "";




if (targetId.equalsIgnoreCase("0"))






{


xml = "<select><value>0</value><text>请选择</text></select>";


} else if (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>";


} else if (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);




}




public void doPost(HttpServletRequest request, HttpServletResponse response)


throws ServletException, IOException






{


doGet(request, response);


}




public void 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航