struts ajax多级下拉菜单

先看项目截图:

看看要加入的jar包

除了struts核心的那个几个之外,我们还需要这两个

OK先看struts.xml

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN"
    "http://struts.apache.org/dtds/struts-2.1.dtd">

<struts>
    <constant name="struts.devMode" value="true"></constant>
    <package name="test" namespace="/" extends="struts-default">
         <action name="getProvince" class="cdm.module.file.action.SearchFileAction" method="getProvince">
        <result>/testSelect.jsp</result>
        </action>
    </package>

    <package name="searchFileJSON" namespace="/" extends="json-default">
        <action name="getMunicipality" class="cdm.module.file.action.SearchFileAction" method="getMunicipality">
            <result type="json">
                <param name="root">municipalities</param>
            </result>
        </action>
    </package>
</struts>

我们看看用于处理请求的类。

package cdm.module.file.action;

import java.util.ArrayList;
import java.util.List;
import com.opensymphony.xwork2.ActionSupport;

public class SearchFileAction extends ActionSupport {

    /**
     *
     */
    private static final long serialVersionUID = -6756954284459457436L;

    public int provinceId;

    public List<Municipality> municipalities;

    public List<Province> provinces=new ArrayList<Province>();

    public String getProvince(){
        //下面的为模拟数据库操作
        Province p1=new Province();
        p1.setId(1);
        p1.setName("陕西省");

        Province p2=new Province();
        p2.setId(2);
        p2.setName("山西省");

        provinces.add(p1);
        provinces.add(p2);
        return SUCCESS;
    }

    public String getMunicipality(){
        municipalities=new ArrayList<Municipality>();
        //下面的为模拟数据库操作
        if (provinceId==1) {
            Municipality municipality=new Municipality();
            municipality.setId(1);
            municipality.setName("咸阳市");
            municipality.setProvinceId(1);
            municipalities.add(municipality);
            municipality=new Municipality();
            municipality.setId(2);
            municipality.setName("西安市");
            municipality.setProvinceId(1);
            municipalities.add(municipality);
        }

        if (provinceId==2) {
            Municipality municipality=new Municipality();
            municipality.setId(1);
            municipality.setName("运城市");
            municipality.setProvinceId(2);
            municipalities.add(municipality);
            municipality=new Municipality();
            municipality.setId(2);
            municipality.setName("太原市");
            municipality.setProvinceId(2);
            municipalities.add(municipality);
        }
        System.out.println(municipalities.get(0).getName()+"sdfs");

        return SUCCESS;
    }

    //省略三个实例变量的getset方法
}

至于Municipality,与Province,省里面有个一id和name,市除了id和name外还有一个provinceId,来指示它位于哪个省。

testSelect.jsp也很简单就是下面代码示例。

<%@ page contentType="text/html; charset=GB2312"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title></title>

        <script type="text/javascript" src="js/json2.js"></script>
        <script type="text/javascript" src="js/prototype.js"></script>
        <script type="text/javascript" src="js/findInf.js"></script>
</head>
<body>
    <br>

    <table class="tab_frm" >
                    <tr>
                        <td class="left" width="5%">
                            省级别
                        </td>
                        <td class="left" width="18%">
                            市级别
                        </td>

                    </tr>
                    <tr>

                        <td class="center" width="5%">
                            <s:select  id="categoryId0" list="provinces"
                                listKey="id" listValue="name" headerKey="-1"
                                headerValue="-请选择省-" theme="simple"
                                onchange="getProvince(this)" />
                        </td>
                        <td class="center" width="18%">
                            <s:select  id="conditionId0" list="#{'-1':'-请先选择省-'}"
                                theme="simple" disabled="true" />
                        </td>
                    </tr>
    </table>

</body>
</html>

核心在引入的findInf.js,代码如下:

function getProvince(obj) {

    var provinceId = obj.options[obj.selectedIndex].value;
    var select = document.getElementById("conditionId0");

    if (provinceId < 0) {
        select.innerHTML = "";
        select1.innerHTML = "";
        var con = new Option();
        con.text = "-请先选择省-";
        con.value = "-1";
        var mat = new Option();
        mat.text = "-请先选择省-";
        mat.value = "-1";
        select.options.add(con);

        select.disabled=true;

        return;
    }
    var url = "getMunicipality.action?provinceId=" + provinceId;
    new Ajax.Request(url, {method:"post", onComplete:function (request) {
        select.innerHTML = "";
        var o = new Option();
        o.text = "-请选择市-";
        o.value = "-1";
        select.options.add(o);
        var tableList = JSON.parse(request.responseText);
        for (var i = 0; i < tableList.length; i++) {
            var _o = new Option();
            _o.text = tableList[i].name;
            _o.value = tableList[i].id;
            select.options.add(_o);
        }
        select.disabled=false;
    }, asynchronous:true});
}

完工!

遇到的几个问题

        <script type="text/javascript" src="js/json2.js"></script>
        <script type="text/javascript" src="js/prototype.js"></script>
        <script type="text/javascript" src="js/findInf.js"></script>

findInf要等上面两个引入后才能引用。

当时复制的时候没有注意这一点。

启用firefox的调试功能,看到Ajax is not define 才想到这个问题。

其他资料:

http://www.jb51.net/article/37316.htm

http://www.wzsky.net/html/Website/Javascript/126012.html

http://www.w3school.com.cn/jquery/ajax_ajax.asp

struts ajax多级下拉菜单的更多相关文章

jquery实现多级下拉菜单
支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...
基于jQuery带图标的多级下拉菜单
之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...
一款多浏览器兼容的javascript多级下拉菜单
这个多级下拉菜单的脚本大小不到2K,带有动画效果,可以方便地支持多个实例,并且能良好兼容WordPress系统wp_list_cats和wp_list_pages生成的多级列表.要初始化一个菜单,只需 ...
小程序多级下拉菜单demo
小程序多级下拉菜单demo - CSDN博客 https://blog.csdn.net/github_39371177/article/details/80251211
bootstrap多级下拉菜单
只需为下拉菜单的任意 <li> 元素添加 .dropdown-submenu 的类,并在该 <li> 元素下添加 .dropdown-menu 类的列表,就可以为该菜单项添加一 ...
jQuery制作水平多级下拉菜单
本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <u ...
AJAX多级下拉联动【JSON】
前言前面我们已经使用过了XML作为数据载体在AJAX中与服务器进行交互.当时候我们的案例是二级联动,使用Servlet进行控制这次我们使用JSON作为数据载体在AJAX与服务器交互,使用三级联动, ...
ajax实现下拉菜单无刷新加载更多
$(function() { var page = 1; var discount = $('#discount'); var innerHeight = window.innerHeight; va ...
android 多级下拉菜单实现教程
原创,如转载请标明链接:http://blog.csdn.net/q610098308/article/details/50333387 很多App,都有二级菜单出现,但android 本身实现的菜单 ...

随机推荐

Android系统对话框
Android系统对话框效果图 2个按钮的对话框 3个按钮的对话框自定义View的对话框单选对话框多选对话框列表框 Code XML <?xml version="1.0&q ...
Swift基础之使用Alamofire库进行网络请求和断点下载
好久没有写过Swift相关的文章博客了,这里我就展示一下关于使用Alamofire库的方法 1.什么是Alamofire (1)Alamofire 的前身是 AFNetworking.AFNetwor ...
BeanUtils 读取数据
前两篇文章都是关于setProperty的,下面来说一个关于getProperty 的小案例.如下: MyClass.java package beanutils; public class MyCl ...
sql server中高并发情况下同时执行select和update语句死锁问题（二）
SQL Server死锁使我们经常遇到的问题,数据库操作的死锁是不可避免的,本文并不打算讨论死锁如何产生,重点在于解决死锁.希望对您学习SQL Server死锁方面能有所帮助. 死锁对于DBA或是数据 ...
Linux之read命令使用
read命令: read 命令从标准输入中读取一行,并把输入行的每个字段的值指定给 shell 变量 1)read后面的变量var可以只有一个,也可以有多个,这时如果输入多个数据,则第一个数据给第一个 ...
XML Schema
XML Schema 是基于 XML 的 DTD 替代者. XML Schema 描述 XML 文档的结构. XML Schema 语言也称作 XMLSchema 定义(XML Schema Defi ...
1Nginx+fastdfs分布式文件存储
准备,将所需的软件传到服务器上,服务器的列表如下: fastdfs-nginx-module_v1.15.tar.gz FastDFS_v4.06.tar.gz libevent-2.0.21- ...
Ext JS 6开发实例（一）
很久没写文章了,主要原因和大家差不多,都要为生活奔忙,搞了两个小项目.这两个小项目很凑巧,都可以使用Ext JS来开发,这正是练习使用Ext JS 6的好机会,自然不会错过. 很多读者可能会问,为什么 ...
LCD 常用的客观效果指标和测试方法
1.DPI--精密度: 评分标准 DPI 评分 DPI<200 50 200≤DPI<250 60 250≤DPI<300 70 300≤DPI<350 80 350≤DPI& ...
CentOS上PHP完全卸载
想把PHP卸载干净,直接用yum的remove命令是不行的,需要查看有多少rpm包,然后按照依赖顺序逐一卸载. 1.首先查看机器上安装的所有php相关的rpm包 [root@localhost ngi ...

struts ajax多级下拉菜单

struts ajax多级下拉菜单的更多相关文章

随机推荐

热门专题