加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Ajax实现二级联动菜单

发布时间:2020-12-15 22:10:04 所属栏目:百科 来源:网络整理
导读:[html] view plain copy %@page language = "java" pageEncoding = "UTF-8" % html head title 二级菜单联动演示 / script type = "text/javascript" varreq; window.onload = function () {//页面加载时的函数 } functionChange_Select(){//当第一个下拉框
[html] view plain copy
  1. <%@pagelanguage="java"pageEncoding="UTF-8"%>
  2. <html>
  3. headtitle>二级菜单联动演示</scripttype="text/javascript" varreq;
  4. window.onload=function()
  5. {//页面加载时的函数
  6. }
  7. functionChange_Select(){//当第一个下拉框的选项发生改变时调用该函数
  8. varprovince=document.getElementById('province').value;
  9. varurl="select?id="+escape(province);
  10. if(window.XMLHttpRequest){
  11. req=newXMLHttpRequest();
  12. }elseif(window.ActiveXObject){
  13. req=newActiveXObject("Microsoft.XMLHTTP");
  14. }
  15. if(req){
  16. req.open("GET",url,true);
  17. //指定回调函数为callback
  18. req.onreadystatechange=callback;
  19. req.send(null);
  20. //回调函数
  21. functioncallback(){
  22. if(req.readyState==4){
  23. if(req.status==200){
  24. parseMessage();//解析XML文档
  25. }else{
  26. alert("不能得到描述信息:"+req.statusText);
  27. //解析返回xml的方法
  28. functionparseMessage(){
  29. varxmlDoc=req.responseXML.documentElement;//获得返回的XML文档
  30. varxSel=xmlDoc.getElementsByTagName('select');
  31. //获得XML文档中的所有select>标记
  32. varselect_root=document.getElementById('city');
  33. //获得网页中的第二个下拉框
  34. select_root.options.length=0;
  35. //每次获得新的数据的时候先把每二个下拉框架的长度清0
  36. for(vari=0;ixSel.length;i++){
  37. varxValue=xSel[i].childNodes[0].firstChild.nodeValue;
  38. //获得每个>标记中的第一个标记的值,也就是value>标记的值
  39. varxText=xSel[i].childNodes[1].firstChild.nodeValue;
  40. >标记中的第二个标记的值,0); background-color:inherit; font-weight:bold">text varoption=newOption(xText,xValue);
  41. //根据每组value和text标记的值创建一个option对象
  42. try{
  43. select_root.add(option);//将option对象添加到第二个下拉框中
  44. }catch(e){
  45. scriptbodydivalign="center"formname="form1"method="post"action=""tablewidth="70%"border="0"cellspacing="0"cellpadding="0"trtdalign="center" 二级联动示例
  46. tdselectname="province"id="province"onChange="Change_Select()" <!--第一个下拉菜单-->
  47. optionvalue="0" 请选择
  48. optionoptionvalue="1" 北京
  49. optionvalue="2" 天津
  50. optionvalue="3" 山东
  51. selectname="city"id="city" <!--第二个下拉菜单-->
  52. 请选择
  53. tableformdiv>

SelectServlet:

[java] copy
    packagecom;
  1. importjava.io.IOException;
  2. importjavax.servlet.ServletException;
  3. importjavax.servlet.http.HttpServlet;
  4. importjavax.servlet.http.HttpServletRequest;
  5. importjavax.servlet.http.HttpServletResponse;
  6. /***
  7. *
  8. *@authorzdw
  9. */
  10. publicclassSelectServletextendsHttpServlet
  11. {
  12. privatestaticfinallongserialVersionUID=1L;
  13. publicSelectServlet()
  14. {
  15. super();
  16. voiddestroy()
  17. super.destroy();
  18. voiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
  19. throwsServletException,IOException
  20. //response.setCharacterEncoding("GBK");
  21. response.setContentType("text/xml");
  22. response.setHeader("Cache-Control","no-cache");
  23. request.setCharacterEncoding("GBK");
  24. response.setCharacterEncoding("UTF-8");
  25. StringtargetId=request.getParameter("id").toString();
  26. System.out.println(targetId);
  27. //获得请求中参数为id的值
  28. Stringxml_start="<selects>";
  29. Stringxml_end="</selects>";
  30. Stringxml="";
  31. if(targetId.equalsIgnoreCase("0"))
  32. xml="<select><value>0</value><text>请选择</text></select>";
  33. }elseif(targetId.equalsIgnoreCase("1"))
  34. xml="<select><value>1</value><text>昌平</text></select>";
  35. xml+="<select><value>2</value><text>丰台</text></select>";
  36. xml+="<select><value>3</value><text>海淀</text></select>";
  37. xml+="<select><value>4</value><text>朝阳</text></select>";
  38. if(targetId.equalsIgnoreCase("2"))
  39. xml="<select><value>1</value><text>塘沽区</text></select>";
  40. xml+="<select><value>2</value><text>汉沽区</text></select>";
  41. xml+="<select><value>3</value><text>大港区</text></select>";
  42. xml+="<select><value>4</value><text>东丽区</text></select>";
  43. else
  44. {//如果是3,则返回下面的字符
  45. xml="<select><value>1</value><text>济南</text></select>";
  46. xml+="<select><value>2</value><text>青岛</text></select>";
  47. xml+="<select><value>3</value><text>淄博</text></select>";
  48. xml+="<select><value>4</value><text>枣庄</text></select>";
  49. Stringlast_xml=xml_start+xml+xml_end;
  50. response.getWriter().write(last_xml);
  51. voiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
  52. doGet(request,response);
  53. voidinit()throwsServletException
  54. }

web.xml:

copy
    <?xmlversion="1.0"encoding="UTF-8"?>
  1. web-appversion="2.4"xmlns="http://java.sun.com/xml/ns/j2ee"
  2. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3. xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
  4. http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"servletservlet-name>SelectServletservlet-class>com.SelectServletservlet-mappingurl-pattern>/selectwelcome-file-listwelcome-file>index.jspweb-app>


源码下载

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读