Ajax实现二级联动菜单

最新推荐文章于 2022-04-12 23:36:35 发布
最新推荐文章于 2022-04-12 23:36:35 发布
阅读量797 收藏 1
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hewusheng10/article/details/8561079
版权

地址： http://blog.csdn.net/supercrsky/article/details/8539123

Ajax实现二级联动菜单

分类： Web前端 2013-01-24 17:39 37916人阅读 评论(4) 收藏 举报

index.jsp:

[html] view plain copy print ?
  1. <%@ page language="java"pageEncoding="UTF-8"%>
  2. <html>
  3. <head>
  4. <title>二级菜单联动演示</title>
  5. <scripttype="text/javascript">
  6. var req;
  7. window.onload=function()
  8. {//页面加载时的函数
  9. }
  11. function Change_Select(){//当第一个下拉框的选项发生改变时调用该函数
  12. var province = document.getElementById('province').value;
  13. var url = "select?id="+ escape(province);
  14. if(window.XMLHttpRequest){
  15. req = new XMLHttpRequest();
  16. }else if(window.ActiveXObject){
  17. req = new ActiveXObject("Microsoft.XMLHTTP");
  18. }
  19. if(req){
  20. req.open("GET",url,true);
  21. //指定回调函数为callback
  22. req.onreadystatechange = callback;
  23. req.send(null);
  24. }
  25. }
  26. //回调函数
  27. function callback(){
  28. if(req.readyState ==4){
  29. if(req.status ==200){
  30. parseMessage();//解析XML文档
  31. }else{
  32. alert("不能得到描述信息:" + req.statusText);
  33. }
  34. }
  35. }
  36. //解析返回xml的方法
  37. function parseMessage(){
  38. var xmlDoc = req.responseXML.documentElement;//获得返回的XML文档
  39. var xSel = xmlDoc.getElementsByTagName('select');
  40. //获得XML文档中的所有<select>标记
  41. var select_root =document.getElementById('city');
  42. //获得网页中的第二个下拉框
  43. select_root.options.length=0;
  44. //每次获得新的数据的时候先把每二个下拉框架的长度清0
  46. for(var i=0;i<xSel.length;i++){
  47. var xValue = xSel[i].childNodes[0].firstChild.nodeValue;
  48. //获得每个<select>标记中的第一个标记的值,也就是<value>标记的值
  49. var xText = xSel[i].childNodes[1].firstChild.nodeValue;
  50. //获得每个<select>标记中的第二个标记的值,也就是<text>标记的值
  52. var option = new Option(xText, xValue);
  53. //根据每组value和text标记的值创建一个option对象
  55. try{
  56. select_root.add(option);//将option对象添加到第二个下拉框中
  57. }catch(e){
  58. }
  59. }
  60. }
  61. </script>
  62. </head>
  64. <body>
  65. <divalign="center">
  66. <formname="form1"method="post"action="">
  67. <tablewidth="70%"border="0"cellspacing="0"cellpadding="0">
  68. <tr>
  69. <tdalign="center">
  70. 二级联动示例
  71. </td>
  72. </tr>
  73. <tr>
  74. <td>
  75. <selectname="province"id="province"onChange="Change_Select()">
  76. <!--第一个下拉菜单-->
  77. <optionvalue="0">
  78. 请选择
  79. </option>
  80. <optionvalue="1">
  81. 北京
  82. </option>
  83. <optionvalue="2">
  84. 天津
  85. </option>
  86. <optionvalue="3">
  87. 山东
  88. </option>
  89. </select>
  90. <selectname="city"id="city">
  91. <!--第二个下拉菜单-->
  92. <optionvalue="0">
  93. 请选择
  94. </option>
  95. </select>
  96. </td>
  97. </tr>
  98. <tr>
  99. <td>
  100. </td>
  101. <tr>
  102. </table>
  103. </form>
  104. </div>
  105. </body>
  106. </html>
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
    <head>
        <title>二级菜单联动演示</title>
        <script type="text/javascript">
    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文档中的所有<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:

[java] view plain copy print ?
  1. package com;
  3. import java.io.IOException;
  5. import javax.servlet.ServletException;
  6. import javax.servlet.http.HttpServlet;
  7. import javax.servlet.http.HttpServletRequest;
  8. import javax.servlet.http.HttpServletResponse;
  9. /***
  10. *
  11. * @author zdw
  12. *
  13. */
  14. public class SelectServletextends HttpServlet
  15. {
  17. private staticfinal long serialVersionUID = 1L;
  19. public SelectServlet()
  20. {
  21. super();
  22. }
  24. public void destroy()
  25. {
  26. super.destroy();
  27. }
  29. public void doGet(HttpServletRequest request, HttpServletResponse response)
  30. throws ServletException, IOException
  31. {
  32. // response.setCharacterEncoding("GBK");
  33. response.setContentType("text/xml");
  34. response.setHeader("Cache-Control","no-cache");
  35. request.setCharacterEncoding("GBK");
  36. response.setCharacterEncoding("UTF-8");
  37. String targetId = request.getParameter("id").toString();
  38. System.out.println(targetId);
  39. // 获得请求中参数为id的值
  40. String xml_start = "<selects>";
  41. String xml_end = "</selects>";
  42. String xml = "";
  44. if (targetId.equalsIgnoreCase("0"))
  45. {
  46. xml = "<select><value>0</value><text>请选择</text></select>";
  47. } else if (targetId.equalsIgnoreCase("1"))
  48. {
  49. xml = "<select><value>1</value><text>昌平</text></select>";
  50. xml += "<select><value>2</value><text>丰台</text></select>";
  51. xml += "<select><value>3</value><text>海淀</text></select>";
  52. xml += "<select><value>4</value><text>朝阳</text></select>";
  53. } else if (targetId.equalsIgnoreCase("2"))
  54. {
  55. xml = "<select><value>1</value><text>塘沽区</text></select>";
  56. xml += "<select><value>2</value><text>汉沽区</text></select>";
  57. xml += "<select><value>3</value><text>大港区</text></select>";
  58. xml += "<select><value>4</value><text>东丽区</text></select>";
  59. } else
  60. {// 如果是3,则返回下面的字符
  61. xml = "<select><value>1</value><text>济南</text></select>";
  62. xml += "<select><value>2</value><text>青岛</text></select>";
  63. xml += "<select><value>3</value><text>淄博</text></select>";
  64. xml += "<select><value>4</value><text>枣庄</text></select>";
  65. }
  67. String last_xml = xml_start + xml + xml_end;
  68. response.getWriter().write(last_xml);
  70. }
  72. public void doPost(HttpServletRequest request, HttpServletResponse response)
  73. throws ServletException, IOException
  74. {
  75. doGet(request, response);
  76. }
  78. public void init()throws ServletException
  79. {
  80. }
  82. } 
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:

[html] view plain copy print ?
  1. <?xmlversion="1.0"encoding="UTF-8"?>
  2. <web-appversion="2.4"xmlns="http://java.sun.com/xml/ns/j2ee"
  3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4. xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
  5. http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  6. <servlet>
  7. <servlet-name>SelectServlet</servlet-name>
  8. <servlet-class>com.SelectServlet</servlet-class>
  9. </servlet>
  11. <servlet-mapping>
  12. <servlet-name>SelectServlet</servlet-name>
  13. <url-pattern>/select</url-pattern>
  14. </servlet-mapping>
  15. <welcome-file-list>
  16. <welcome-file>index.jsp</welcome-file>
  17. </welcome-file-list>
  18. </web-app>
南华
关注
专栏目录
使用ajax实现二级联动
doaram123的博客
07-21 2566
首先想要实现的二级联动效果，页面加载时从数据库调取省份的名字，并显示在jsp页面上，改变省份时后面出现该省对应的城市； 第一步，页面加载时，省份名字显示，首先是使用jdbc连接技术，从数据库查询省的名字和编号，package com.dao;import java.sql.Connection; import java.sql.PreparedStatement; import java.sq
Ajax 二级联动
坚持去坚持。
10-23 4560
准备工作导入vue&jquery的js包 导包部分省略不写 接下来应该先写html页面的代码 <div id="app"> <form> 手机号：<input type="number" v-model="persons.phone" id="phone"> <span id="error"></span>&lt...
ajax二级联动菜单
yanchao1023的专栏
08-23 936
<br /><%@ page language="java" pageEncoding="UTF-8"%><br /><html><br />    <head><br />        <title>二级菜单联动演示</title><br />        <script type="text/javascript"><br />    var req;<br />    window.onload=function()<br />    {//页面加载时的函数<br />    }<br />   
ajax二级联动
Master_chaoAndQi的博客
05-07 335
1需求分析        根据部门选择部门下的用户思路：采用两个下拉列表，一个下拉列表绑定部门，当下拉列表的值发生变化时，修改下拉列表2的数据，完成ajax二级联动1  静态页面准备两个下拉列表                        &lt;p style="width:200px;height:50px; "&gt;选择部门： &lt;select id="dept" s...
AJAX 實現二級聯動
技術萬花筒
05-15 2494
     最近老总提了一个小功能，在搜索网吧列表的时候加上网吧所属代理商这个条件，原有的搜索条件是一个地区二级联动，现在需要根据不同的地区显示不同的代理商集合。即在触发地区下拉框的onchange事件时，代理商的下拉框选项也相应的改变，比如选择地区 湖南—〉长沙，那么代理商下拉框只显示长沙的代理商。    本来认为这个很好实现，但实际改起来的时候发现问题多多，主要问题是原有的地区联动是用js实现的
PHP+ajax实现二级联动菜单功能示例
10-18
PHP与AJAX结合实现二级联动菜单功能的知识点包括如下几个方面： 1. 理解二级联动菜单的工作原理： - 二级联动技术是前端常见的交互方式，常用于表单元素中，比如在选择省份后动态地加载该省份下的城市选项。 - 该...
JavaScript之AJAX实现二级联动菜单(jsp+js+servlet
m0_66789766的博客
04-12 1028
请选择大师作品 2.2、1.js文件源码如下： var xhr; //根据不同浏览器创建xhr对象的函数 function creatXHR () { if (typeof(XMLHttpRequest)!=“undefined”) { return new XMLHttpRequest(); //针对IE7及四大浏览器 }else if (typeof ActiveXObject !=“undefined”) { if (typeof arguments.callee..
ajax 二级联动
ck_xiao_hu的博客
08-22 101
js： <input type="hidden" name="PERIOD_ID" id="PERIOD_ID" value="${pd.PERIOD_ID}"/> td> <select name="SEGMENT_ID" id="bd" style="vertical-align:top;width: 215...
ajax实现二级联动
weixin_30510153的博客
05-07 109
用js实现简单的ajax二级联动（如上图） HTML代码： 1 省份：<select id="province" onchange="getCity();" > 2 <option>请选择--</option> 3 </select> 4 城市:<select id="city"> 5 ...
jquery ajax实现省市二级联动
07-11
该资源包含了一个使用jquery ajax实现的省市二级联动的简单demo，简单易懂，可以参考博客：http://blog.csdn.net/mockingbirds/article/details/46842327
javascript.和ajax实现二级联动菜单
11-25
1、javascript实现二级联动：运用jsp标签拼写Javascript代码，实现一个二维数组，点击一级栏目时，查询二维数组里，符合一级栏目的value ，放到二级栏目里 2，ajax实现的二级联动：利用Ajax与后台程序实现异步交互，后台程序拼写JOSN字符串，发送到客户端。
Ajax实现二级联动
wyy的博客
05-09 570
ajax02.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>二级联动</title> <base href="<%=request.getContextPath()+"/"%>"> <script type="text/javascript">
AJAX二级下拉框联动
justshare的专栏
12-02 135
[code="java"] var req; window.onload=function(){ } function Change_Select(url, parentInputId, childInputId) { var parentInputValue =...
ajax的使用 二级联动
weixin_61644572的博客
01-19 942
<%@ page contentType=“text/html;charset=UTF-8” language=“java” %> table模块快速使用
AJAX实现二级联动
qq_33210523的博客
05-23 1299
通过AJAX实现二级联动,先动态获取一级下拉列表,通过Onchange()事件,异步查询二级下拉列表内容,把内容写进标签,存入二级下拉列表中一级下拉列表动态获取列表内容 @ResponseBody @Permission("ST1000") @RequestMapping("/editParksite") public String editPosOperator(Pa
用ajax实现二级联动
cyong888的专栏
10-03 423
1.首先写一个jsp页面         My JSP 'index.jsp' starting page                   var req;         window.onload=function(){         }
Ajax实现二级联动菜单详细教程
总结来说，Ajax二级联动菜单的实现涉及以下几个关键点： 1. 监听一级菜单的选中事件，如`onchange`。 2. 使用Ajax异步请求，根据一级菜单的值向服务器发送请求。 3. 服务器返回对应二级菜单的数据，通常为XML或JSON...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值