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 本身实现的菜单 ...
随机推荐
- python获取指定时间差的时间
在分析数据的时间经常需要截取一定范围时间的数据,比如三天之内,两小时前等等时间要求的数据,因此将该部分经常需要用到的功能模块化,方便以后以后用到的时候复用.在此,也分享给大家. <span st ...
- Android 多窗口
随着手机屏幕越来越大,单手操作手机越来越难,所以一些大厂早就开始研究多窗口,如iphone.samsung的单手模式,作为一个发展趋势google肯定也不会不考虑用户的体验,所以在android N中 ...
- OpenCV + Python 人脸检测
必备知识 Haar-like opencv api 读取图片 灰度转换 画图 显示图像 获取人脸识别训练数据 探测人脸 处理人脸探测的结果 实例 图片素材 人脸检测代码 人脸检测结果 总结 下午的时候 ...
- 理解性能的奥秘——应用程序中慢，SSMS中快（3）——不总是参数嗅探的错
本文属于<理解性能的奥秘--应用程序中慢,SSMS中快>系列 接上文:理解性能的奥秘--应用程序中慢,SSMS中快(2)--SQL Server如何编译存储过程 在我们开始深入研究如何处理 ...
- CentOS6.7下安装MySQL
第一步:到MySQL官网上下载linux版本的MySQL rpm 安装包. 第二步: 将该压塑包解压后,有如下文件: 第三步:安装文件,我们需要安装的文件有 MySQL-server-5.6.26-1 ...
- Java基础---Java---IO流-----File 类、递归、删除一个带内容的目录、列出指定目录下文件夹、FilenameFilte
File 类 用来将文件或者文件夹封装成对象 方便对文件与文件夹进行操作. File对象可以作为参数传递给流的构造函数 流只用操作数据,而封装数据的文件只能用File类 File类常见方法: 1.创建 ...
- Android列表视图ListView和ListActivity-android学习之旅（二十四）
ListView简介 ListView是android中常用的一种控件,创建ListView有两种方式: 1.在xml中使用ListView控件创建. 2.使用activity继承ListActivi ...
- 01安卓像素 dpi 、 dip 、分辨率、屏幕尺寸、px、density 关系以及换算
一.基本概念 dip : Density independent pixels ,设备无关像素. dp :就是dip px : 像素 dpi :d ...
- Zeroc Ice Slice语言使用 HelloWorld
Slice介绍 为了开发多语言支持的RPC服务,需要一种中立的新语言来定义这个服务接口,以便各个编程语言能够准确无误地理解和翻译接口,为此Ice设计了Slice语言.Ice开发的第一步 ...
- （六十三）自定义TabBar和TabBarButtonItem
自定义TabBar 先自定义一个UITabBarController,为了方便跳转与设定属性,借助系统的TabBarController的功能,但是要移除内部的控件然后自己添加一个View和多个按钮. ...