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

2024-11-27 23:37:07

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

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>

Java代码：

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代码：

<?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操作DOM节点技巧总结》、《Java文件与目录操作技巧汇总》和《Java缓存操作技巧汇总》

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

AJAX省市区三级联动下拉菜单(java版)

此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为: $(document).ready(function(){ $.get("getProvince.do", function(result){ $("#showp").html(result); }); }) var xmlhttp; function mysend(str){ $(docum
Android自定义实现循环滚轮控件WheelView

首先呈上Android循环滚轮效果图: 现在很多地方都用到了滚轮布局WheelView,比如在选择生日的时候,风格类似系统提供的DatePickerDialog,开源的控件也有很多,不过大部分都是根据当前项目的需求绘制的界面,因此我就自己写了一款比较符合自己项目的WheelView. 首先这个控件有以下的需求: 1.能够循环滚动,当向上或者向下滑动到临界值的时候,则循环开始滚动 2.中间的一块有一块半透明的选择区,滑动结束时,哪一块在这个选择区,就选择这快. 3.继承自View进行绘制然
android-wheel控件实现三级联动效果

本文实例为大家分享了android wheel省市县三级联动效果,供大家参考,具体内容如下在github上面有一个叫做 Android-wheel 的开源控件, 代码地址:https://github.com/maarek/android-wheel 源码下载地址:http://xiazai.jb51.net/201610/yuanma/AndroidCascadeMaster(jb51.net).rar 主界面布局 activity_main.xml <LinearLayout xmlns:
Java框架SSH结合Easyui控件实现省市县三级联动示例解析

Easyui调用数据库实现省市县区三级联动的效果如果下 1.首先要设计数据库,如图所示.一个有4个字段code,note,pycode.code:行政区划代码,note:中文注释,pycode:拼音缩写. 其中code是由6个字段组成.如果是省级最后4位是0000,如果是地级市最后2位是00,其他是县区. 我已经把相关数据库代码上传到我的csdn资源中,需要的同学自行下载. 2.我用的是java.SSH框架结合Easyui控件 3.html代码如下 <tr> <td class=&quo
Android实现三级联动下拉框下拉列表spinner的实例代码

主要实现办法:动态加载各级下拉值的适配器在监听本级下拉框,当本级下拉框的选中值改变时,随之修改下级的适配器的绑定值 XML布局: 复制代码代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_w
Android使用android-wheel实现省市县三级联动

今天没事跟群里面侃大山,有个哥们说道Android Wheel这个控件,以为是Andriod内置的控件,google一把,发现是个github上的一个控件. 下载地址:https://code.google.com/p/android-wheel/ 发现很适合做省市县三级联动就做了一个. 先看下效果图: 1.首先导入github上的wheel项目 2.新建个项目,然后选择记得右键->Properties->Android中将wheel添加为lib: 上面两个步骤是导入所有开源项目的过程了
Android实现两个ScrollView互相联动的同步滚动效果代码

本文实例讲述了Android实现两个ScrollView互相联动的同步滚动效果代码.分享给大家供大家参考,具体如下: 最近在做一个项目,用到了两个ScrollView互相联动的效果,简单来说联动效果意思就是滑动其中的一个ScrollView另一个ScrollView也一同跟着滑动,要做到一起同步滑动.感觉在以后的项目开发中大家可能也会用到,绝对做个Demo分享出来,供大家一起学习,以便大家以后好用,觉的不错,有用的可以先收藏起来哦! 其实对于ScrollView,Android官方并没有提供相关
Android仿eleme点餐页面二级联动列表

本周末外卖点得多,就仿一仿"饿了么"好了.先上图吧,这样的订单页面是不是很眼熟: 右边的listview分好组以后,在左边的Tab页建立索引.可以直接导航,是不是很方便.关键在于右边滑动,左边也会跟着滑:而点击左边呢,也能定位右边的项.它们存在这样一种特殊的交互.像这种联动的效果,还有些常见的例子呢,比如知乎采用了常见的toolbar+viewPager的联动,只不过是上下布局: 再看看点评,它的城市选择页面也有这种联动的影子,只是稍微弱一点.侧边栏可以对listview进行索引,这最
Android自定义可循环的滚动选择器CycleWheelView

最近碰到个项目要使用到滚动选择器,原生的NumberPicker可定制性太差,不大符合UI要求. 网上开源的WheelView是用ScrollView写的,不能循环滚动,而且当数据量很大时要加载的Item太多,性能非常低. 然后,还是自己写一个比较靠谱,用的是ListView实现的.写完自己体验了一下,性能不错,再大的数据也不怕了. 感觉不错,重新封装了一下,提供了一些接口可以直接按照自己的需求定制,调用方法在MainActivity中. 补个图片: 不多说了,直接上代码: CycleWheel
Java实现Map集合二级联动示例

Map集合可以保存键值映射关系,这非常适合本实例所需要的数据结构,所有省份信息可以保存为Map集合的键,而每个键可以保存对应的城市信息,本实例就是利用Map集合实现了省市级联选择框,当选择省份信息时,将改变城市下拉选择框对应的内容. 思路分析: 1. 创建全国(省,直辖市,自治区)映射集合,即LinkedHashMap对象,使用Map接口的put()方法向集合中添加指定的省与城市的映射关系,其中值为String型一维数组. 代码如下: CityMap.java 复制代码代码如下: import

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

相关推荐

随机推荐