纯JSP+DWR实现三级联动下拉选择菜单实现技巧
网上看到一些例子，对于一个简单的三级联动，都加上什么Struts, Hibernate诸如此类的框架。这个Ajax联动殊不知和这些框架有什么关系，一个小Demo干嘛整得那么大。
今天我做了一个dwr+jsp做的例子。
web.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>dwr-invoker</servlet-name>
<servlet-class>
org.directwebremoting.servlet.DwrServlet
</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet>
<servlet-name>SelectServlet</servlet-name>
<servlet-class>com.action.SelectServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
<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>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting
2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
<!-- 没有它DWR什么也做不了 -->
<allow>
<create creator="new" javascript="menu">
<param name="class" value="com.dao.CountryDAO" />
</create>
<!-- 要转换的Bean -->
<convert converter="bean" match="com.vo.Country" />
<convert converter="bean" match="com.vo.Province" />
<convert converter="bean" match="com.vo.City" />
</allow>
</dwr>
<%@ page language="java" import="java.util.*,com.vo.*"
pageEncoding="GBK"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<html>
<head>
<title>DWR三级联动</title>
<script type='text/javascript'
src='/mutiplyMenu/dwr/interface/menu.js'></script>
<script type='text/javascript' src='/mutiplyMenu/dwr/engine.js'></script>
<script type='text/javascript' src='/mutiplyMenu/dwr/util.js'></script>
</head>
<body>
<script type="text/javascript">
//根据国家id查询所属省或州
function queryProvince()
{
var countryId = $("country").value;
//默认为不选择
if(countryId == 0)
{
${"province"}.options.length=0;
${"city"}.options.length=0;
}
else
{
menu.queryProvinceById(countryId,provinceCallback);
}
}
//根据国家id查询所属省或州的回调函数
function provinceCallback(provinces)
{
${"province"}.options.length=0;
//每次获得新的数据的时候先把每二个下拉框架的长度清0
for(var i=0;i< provinces.length;i ++){
var value = provinces[i].id;
var text = provinces[i].provinceName;
var option = new Option(text, value);
//根据每组value和text标记的值创建一个option对象
try{
$("province").add(option);//将option对象添加到第二个下拉框中
}catch(e){
}
}
//同时关联第三级
var provinceId = ${"province"}.value;
menu.queryCityById(provinceId,cityCallback);
}
//查询所属城市
function queryCity()
{
var provinceId = $("province").value;
menu.queryCityById(provinceId,cityCallback);
}
//查询所属城市回调函数
function cityCallback(citys)
{
//每次获得新的数据的时候先把每三个下拉框架的长度清0
${"city"}.options.length=0;
for(var i=0;i< citys.length;i ++){
var value = citys[i].id;
var text = citys[i].cityName;
var option = new Option(text, value);
//根据每组value和text标记的值创建一个option对象
try{
$("city").add(option);//将option对象添加到第三个下拉框中
}catch(e){
}
}
}
function change1()
{
queryProvince();
}
function change2()
{
queryCity();
}
</script>
<div align="center">
<h3>
<br>
</h3>
<h3>
DWR三级联动演示
</h3>
<!-- 我都奇怪了，我的<c>标签在这里不能用 -->
<select id="country" onchange="change1();">
<option selected="selected" value="0">
请选择
</option>
<%
@SuppressWarnings("unchecked")
List list = (List) request.getAttribute("countrys");
for (int i = 0; i < list.size(); i++)
{
Country temp = (Country) list.get(i);
%>
<option value="<%=temp.getId()%>"><%=temp.getCountryName()%></option>
<%
}
%>
</select>
<select id="province" onchange="change2();">
</select>
<select id="city">
</select>
</div>
</body>
</html>
servlet,dao就不帖了，想了解的可以去下载源码
相关推荐
-
jsp编程中session的用法实例分析
本文实例讲述了jsp编程中session的用法.分享给大家供大家参考,具体如下: TTP协议是无状态的,即信息无法通过HTTP协议本身进传递.为了跟踪用户的操作状态,ASP应用SESSION对象.JSP使用一个叫HttpSession的对象实现同样的功能.HTTPSession 是一个建立在cookies 和URL-rewriting上的高质量的界面.Session的信息保存在服务器端,Session的id保存在客户机的cookie中.事实上,在许多服务器上,如果浏览器支持的话它们就使用cook
-
jsp编程去除空白行的方法
本文实例讲述了jsp编程去除空白行的方法.分享给大家供大家参考,具体如下: JSP中由于引入包命令及其他处理,渲染出来的页面源代码很多换行. 以前有很多方法来解决,如 1.在编写源码中注意格式,多行并一行.这个编写比较麻烦,源码不好看. 2.自己写标签,在运行时去除空白行.虽然时间一般很短,但也是耗了时. tomcat 6中天然支持这种功能 1.在工程的web.xml上加上如下配置 <jsp-config> <jsp-property-group> <url-pattern&
-
JSP针对XML文件操作技巧实例分析
本文实例讲述了JSP针对XML文件操作技巧.分享给大家供大家参考,具体如下: XML(Extensible Markup Language)可扩展标记语言,这个基础知识在早些已经学习过.而这篇教程为什么把它放在J2EE下边呢,因为他也是J2EE的13规范之一,虽然XML是W3C万维网组织联盟指定的,并做了规范,所以说也是一种规范,我们也必须按照规范来,和JDBC,Servlet,Jsp,Ejb等一样的. 前边的文章已经介绍了XML的一些基础知识,主要是用来存储,传输数据的,但是这些数据我们怎
-
jsp编程常用技巧小结
本文实例总结了jsp编程常用技巧.分享给大家供大家参考,具体如下: 一.分离下拉列表框中的值 页面中有一个下拉列表框,如下: <td><select > <option value=""></option> <option value="18~30">18~30岁</option> <option value="31~40">31~40岁</option&g
-
卖jsp编程技巧的那个垃圾的所有实例的答案全部已收集，现将他人收集的实例答案公布出来，大家鉴赏！
1. 如何让选中的一行记录高亮显示? http://topic.csdn.net/t/20050105/09/3699823.html 2. 如何在下拉列表框里选择一个值后跳出新窗口? http://topic.csdn.net/t/20050107/15/3707444.html 3. 如何在JSP中启动execl? http://community.csdn.net/Expert/TopicView1.asp?id=4909154 http://community.c
-
jsp编程获取当前目录下的文件和目录及windows盘符的方法
本文实例讲述了jsp编程获取当前目录下的文件和目录及windows盘符的方法.分享给大家供大家参考,具体如下: (一)获取当前目录下的文件和目录 知识点 1 file对象的应用 2 listFiles()方法 3 isDirectory()方法,isFile()方法 判断是否为目录或是文件 4转换字符串方法toString (1)创建一个file对象dir, 然后用listFiles()方法返回当前目录下所有文件 String path=request.getRealPath("/")
-
jsp 页面上图片分行输出小技巧
<table border="0" cellpadding="2"> <c:forEach items="${pics}" var="pic" varStatus="status"> <c:if test="${((status.index)%3)==0}"><tr></c:if> <td> <input cl
-
jsp+Servlet编程实现验证码的方法
本文实例讲述了jsp+Servlet编程实现验证码的方法.分享给大家供大家参考,具体如下: 这里用到两个类,一个用于验证码实现,一个为后台Servlet验证输入是否正确: CodeUtil.java--------验证码具体实现: package util; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.
-
JSP简明教程：令人兴奋的脚本编程
如果你是直接使用Java servlets,那你将不得不在Java类中处理HTTP输入和HTML输出,你需要丰富的Java编程经验来构建复杂的应用程序.JSP的加入,使你可以把HTML的表达逻辑从植入servlets中的复杂的商务逻辑区分开来.这意味着可以由有经验的脚本编写者来编写表达层代码,而高级的Java开发者能够集中精力去解决servlets和bean中更为复杂的问题. 不管你有没有Java编程知识,都能够使用JSP.JSP包含了一些服务器端的标签,使得不用写一行Java代码就能显示动态数
-
纯JSP+DWR实现三级联动下拉选择菜单实现技巧
网上看到一些例子,对于一个简单的三级联动,都加上什么Struts, Hibernate诸如此类的框架.这个Ajax联动殊不知和这些框架有什么关系,一个小Demo干嘛整得那么大. 今天我做了一个dwr+jsp做的例子. web.xml: 复制代码 代码如下: <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.s
-
javascript实现省市区三级联动下拉框菜单
本文实例讲述了javascript实现省市区三级联动下拉框菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http:/
-
javascript省市区三级联动下拉框菜单实例演示
本文实例讲述了javascript实现省市区三级联动下拉框菜单代码,像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"
-
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做任何选择时: 选择时: 代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>三级联动测试</titl
-
js实现的全国省市二级联动下拉选择菜单完整实例
本文实例讲述了js实现的全国省市二级联动下拉选择菜单.分享给大家供大家参考.具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-province-city-cho-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
-
基于javascript实现全国省市二级联动下拉选择菜单
本文实例讲述了js实现全国省市二级联动下拉选择菜单,分享给大家供大家参考.具体如下: 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript"&g
-
省市区三级联动下拉框菜单javascript版
实现省市区三级下拉列表框,并且要实现联动效果. 方法一: 1.视图代码 <select class="prov" id="prov5" name="Province" data-code="@Model.Province"> </select> <select class="city" id="city5" name="City" dat
-
ajax读取数据库内容实现二级联动下拉选择菜单示例
复制代码 代码如下: <PRE class=javascript name="code"></PRE><PRE class=javascript name="code">---------------------这是ajax(javascript)代码---------------------------</PRE><PRE class=javascript name="code">&l
-
中国地区三级联动下拉菜单效果分析
因为最近有需要用到中国地区三级联动下拉菜单,虽然用公司的框架已经实现,但是看的比较迷茫,就网上找了下相关代码,主要的数据和功能实现都是在js文件中,网上找的地区数据有的地方不完整,需要自己添加,虽然和公司的框架实现的代码不一样,还是先把代码放上了,以后需要的时候可以看看,大家也可以看看! 1.首先是js文件(area.js): 复制代码 代码如下: function Dsy() { this.Items = {}; } Dsy.prototype.add = function(id,iArray
-
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
本文实例讲述了JS实现经典的中国地区三级联动下拉菜单功能.分享给大家供大家参考,具体如下: 1.首先是js文件(area.js): function Dsy() { this.Items = {}; } Dsy.prototype.add = function(id,iArray) { this.Items[id] = iArray; } Dsy.prototype.Exists = function(id) { if(typeof(this.Items[id]) == "undefined&q