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开发技巧--定制仿微信图片裁剪控件> 的,先简单介绍对上篇所封装的裁剪控件的使用,再详细说明如何使用它进行大图裁剪,包括对旋转图片的裁剪. 裁剪控件的简单使 ...
- 在Mac上搭建React Native开发环境
概述 前面我们介绍过在window环境下开发React Native项目,今天说说怎么在mac上搭建一个RN的开发环境. 配置mac开发环境 基本环境安装 1.先安装Homebrew:用于安装Node ...
- Effective C++ ——继承与面向对象设计
条款32:确定你的public继承塑模出is-a关系 以public继承的类,其父类的所有的性质都应该使用与子类,任何需要父类的地方都应该能用子类来代替,任何子类类型的对象也同时是父类的: class ...
- MTK8127源码编译出现的错误及相关解决办法
/** * date:2016/8/17 * author: Y.X .YANG */ 按照开发文档提示: 1.MTK提供的开发包目录下有若干个.aa .ab .ac ...的分压缩包.此时应当将这些 ...
- 深入理解MyBatis框架的的配置信息
面对一个框架,最重要的不是说回用其代码就可以了,我们需要了解其思想,这样才能更快更好的掌握这个框架.而对于一个框架,最重要的就是其配置文件的作用及功能了.下面,我就来谈一谈我今天遇到的这个MyBati ...
- 【Unity Shaders】游戏性和画面特效——创建一个老电影式的画面特效
本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...
- Mybatis简单入门
MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以使用简单的XML或注解用 ...
- jquery 只读
大家都理解这是什么,正常的写法如下: if (status == true) { $("#minDelistStr").val(totalAmount);// 去掉首部的" ...
- python类:属性
http://blog.csdn.net/pipisorry/article/details/50708616 Python 中的 property 属性 Python中有个很赞的概念,叫做prope ...
- Android开发模式之MVC,MVP和MVVM的简单介绍与区别
相信大家对MVC,MVP和MVVM都不陌生,作为三个最耳熟能详的Android框架,它们的应用可以是非常广泛的,但是对于一些新手来说,可能对于区分它们三个都有困难,更别说在实际的项目中应用了,有些时候 ...