个人中心
gpt4 book ai didi

java实现的二级联动菜单效果

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章java实现的二级联动菜单效果由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例讲述了java实现的二级联动菜单效果。分享给大家供大家参考，具体如下:

JSP代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<%@ 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>

Java代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
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
   {
   }
}

XML代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<? 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 >

希望本文所述对大家java程序设计有所帮助.

最后此篇关于java实现的二级联动菜单效果的文章就讲到这里了,如果你想了解更多关于java实现的二级联动菜单效果的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： java简单列出文件夹下所有文件的方法
文章推荐： 在Mac OS的PHP环境下安装配置MemCache的全过程解析
文章推荐： ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
文章推荐： ECshop 迁移到 PHP7版本时遇到的兼容性问题