`
wangtong40
  • 浏览: 252903 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用DWR实现的联动Select

阅读更多

2007-01-11 周四 DWR学习第二天

这个东西他妈的就是好用,以前写的用联动,满天飞DOM,用这个东西,短短几行就搞定,看来AJAX满天飞的日子不远了

自己写了一个联动Select的例子

 

dwr.xml 如下
xml 代码
  1. < allow >   
  2.      < convert   converter = "bean"   match = "ajax.dwr.linkageSelect.Select" />   
  3.      < create   creator = "new"   javascript = "LinkageSelectAction" >   
  4.      < param   name = "class"   value = "ajax.dwr.linkageSelect.LinkageSelectAction" />   
  5.      < include   method = "findProvinces" />   
  6.      create >   
  7. allow >   

 

java代码如下:
java 代码
  1. package  ajax.dwr.linkageSelect;   
  2.   
  3. public   class  Select {   
  4.      private  String key; // 键   
  5.   
  6.      private  String value; // 值   
  7.   
  8.      private  String nation;   
  9.   
  10.      public  String getNation() {   
  11.          return  nation;   
  12.     }   
  13.   
  14.      public   void  setNation(String nation) {   
  15.          this .nation = nation;   
  16.     }   
  17.   
  18.      public  String getKey() {   
  19.          return  key;   
  20.     }   
  21.   
  22.      public   void  setKey(String key) {   
  23.          this .key = key;   
  24.     }   
  25.   
  26.      public  String getValue() {   
  27.          return  value;   
  28.     }   
  29.   
  30.      public   void  setValue(String value) {   
  31.          this .value = value;   
  32.     }   
  33. }   

 

java 代码
  1. package  ajax.dwr.linkageSelect;   
  2.   
  3. import  java.util.ArrayList;   
  4. import  java.util.HashMap;   
  5. import  java.util.List;   
  6. import  java.util.Map;   
  7.   
  8. public   class  LinkageSelectAction {   
  9.   
  10.   
  11.      public  Map findProvinces(String nation) {   
  12.         Map result =  new  HashMap();   
  13.         List list = initData();   
  14.         Select bean;   
  15.          for  ( int  i =  0 ; i < list.size(); i++) {   
  16.             bean = (Select) list.get(i);   
  17.              if  (bean.getNation().equals(nation)) {   
  18.                 result.put(bean.getKey(),bean.getValue());   
  19.             }   
  20.         }   
  21.          return  result;   
  22.     }   
  23.   
  24.      private  List initData() {   
  25.         List list =  new  ArrayList();   
  26.         Select bean =  new  Select();   
  27.         bean.setNation( "1" );   
  28.         bean.setKey( "1" );   
  29.         bean.setValue( "北京" );   
  30.         list.add(bean);   
  31.   
  32.         bean =  new  Select();   
  33.         bean.setNation( "1" );   
  34.         bean.setKey( "2" );   
  35.         bean.setValue( "天津" );   
  36.         list.add(bean);   
  37.   
  38.         bean =  new  Select();   
  39.         bean.setNation( "1" );   
  40.         bean.setKey( "3" );   
  41.         bean.setValue( "山西" );   
  42.         list.add(bean);   
  43.   
  44.         bean =  new  Select();   
  45.         bean.setNation( "2" );   
  46.         bean.setKey( "4" );   
  47.         bean.setValue( "Tokyo" );   
  48.         list.add(bean);   
  49.   
  50.         bean =  new  Select();   
  51.         bean.setNation( "2" );   
  52.         bean.setKey( "5" );   
  53.         bean.setValue( "Kokyo" );   
  54.         list.add(bean);   
  55.   
  56.         bean =  new  Select();   
  57.         bean.setNation( "2" );   
  58.         bean.setKey( "6" );   
  59.         bean.setValue( "Osaka" );   
  60.         list.add(bean);   
  61.   
  62.         bean =  new  Select();   
  63.         bean.setNation( "3" );   
  64.         bean.setKey( "7" );   
  65.         bean.setValue( "California" );   
  66.         list.add(bean);   
  67.   
  68.         bean =  new  Select();   
  69.         bean.setNation( "3" );   
  70.         bean.setKey( "8" );   
  71.         bean.setValue( "Tennessee" );   
  72.         list.add(bean);   
  73.          return  list;   
  74.     }   
  75.   
  76. }   

 

js 代码
  1.  <script language=< span="">"javaScript"  src= "<%=request.getContextPath()%>/dwr/interface/LinkageSelectAction.js" ></script>   
  2.   <script type='text javascript' src="/dwr/engine.js"></script>   
  3.   <script type='text javascript' src="/dwr/util.js"></script>   
  4.   
  5. <script>   
  6.    var  key =  function (unit) {  return  unit.key };   
  7.    var  value =  function (unit) {  return  unit.value };   
  8.    var  nation =  function (unit) {  return  unit.nation };   
  9.      
  10.   function  linkage() {   
  11.      var  nation = document.getElementById( "nation" ).value;   
  12.     LinkageSelectAction.findProvinces(nation,loadProvince);   
  13.   }   
  14.      
  15.   function  loadProvince(provinceItems)   
  16.  {   
  17.  DWRUtil.removeAllOptions( "province" );   
  18.  DWRUtil.addOptions( "province" , provinceItems);   
  19.  }   
  20.     
  21.     
  22. </script>  
分享到:
评论

相关推荐

    DWR联动刷select

    ### DWR联动刷select实现联动菜单 #### 一、DWR简介 Direct Web Remoting (DWR) 是一种简化Ajax应用程序开发的技术。它允许JavaScript直接调用Java方法,并且能够处理JSON数据,使得前后端之间的交互更为简单高效...

    DWR实现省市县三级联动小例子

    标题 "DWR实现省市县三级联动小例子" 暗示了这个压缩包可能包含一个使用Direct Web Remoting (DWR) 技术构建的示例项目,该示例展示了如何实现在网页上进行省、市、县三级联动选择的功能。这种功能在很多中国的网站...

    dwr下拉联动的例子

    在这个例子中,DWR的使用简化了前后端的通信,使得下拉联动功能得以流畅实现。同时,随着"**相关资料上传**",可能还包括了示例代码、数据库结构、部署配置等更详尽的信息,帮助开发者更好地理解和应用这个例子。...

    DWR 实现三级联动(2)

    【DWR实现三级联动(2)】的知识点详解 DWR (Direct Web Remoting) 是一个JavaScript库,它允许Web应用程序直接与Java后端进行交互,实现Ajax功能,即在不刷新整个页面的情况下更新部分网页内容。在这个场景中,DWR...

    ajaxdwr select二级联动

    现在,让我们深入探讨如何使用Ajax和DWR实现select二级联动: 1. **前端准备**:首先,你需要两个HTML的`&lt;select&gt;`元素,一个代表一级分类,另一个代表二级分类。通常,一级分类的选择会触发二级分类的更新。使用...

    DWR 实现三级联动(1)

    在本例中,我们将探讨如何使用Direct Web Remoting (DWR)框架来实现这个功能,特别是在Struts2+Spring2+Hibernate3的架构中。 首先,我们来理解DWR。DWR是一种JavaScript库,它允许Web应用在客户端和服务器之间进行...

    struts2+dwr实现省市县三级联动

    在本项目“struts2+dwr实现省市县三级联动”中,主要目标是构建一个用户界面,当用户选择一个省份时,市和县的下拉列表会自动更新,展示与所选省份相关的城市和县。这种功能在许多需要地理位置信息的网站或系统中...

    天气预报,城市select联动,dwr,json

    天气预报,城市select联动,dwr,json 全国各省名称: http://www.weather.com.cn/data/list3/city.xml 全国城市: http://www.weather.com.cn/data/city3jdata/china.html 获得各省城市清单: ...获得各市城市清单: ...

    实例讲解利用DWR+Spring实现省市网点联动

    本文将详细介绍如何使用Direct Web Remoting (DWR) 和 Spring 框架来实现这种联动效果。 **DWR技术简介** DWR是一个基于Servlet的Ajax框架,它的主要功能是让浏览器能够直接调用服务器端的Java方法,简化了客户端与...

    DWR+Spring下拉框联动实例

    至此,我们就实现了DWR和Spring集成的下拉框联动实例。当用户在`parentSelect`中选择一个值,`updateChildSelect`函数会被调用,通过DWR向服务器发送请求,获取到新的`childSelect`选项,并更新下拉框内容。这种方式...

    Dwr_cities三级联动

    【Dwr_cities三级联动】是一个典型的Web应用程序开发示例,它主要展示了如何实现省、市、县(区)的三级联动效果。这个项目通常用于地址选择或者区域筛选功能,例如在电商网站的配送地址设置中。在这个系统中,用户...

    dwr写的二级联动,要的快

    总结一下,这个示例展示了如何使用DWR实现在Web应用中的一级城市和二级城市的联动效果。通过Java后端提供数据,DWR作为桥梁在前端JavaScript中调用这些方法,动态更新用户界面。这个过程涉及了Java服务器端编程、JSP...

    dwr3初学者使用说明

    - JavaScript函数实现了下拉列表的功能,包括省份和城市的联动选择。 ##### 2. Java后端代码 接下来是Java后端代码示例: ```java package com.dwr; public class Select { public String selectPro() { return...

    省市县三级联动

    3. JSP前端:JSP页面上,使用`&lt;select&gt;`标签创建下拉菜单,通过AJAX异步请求获取后端返回的地区数据,动态生成下拉选项。可以选择使用jQuery或其他JavaScript库来实现AJAX请求。 二、DWR(Direct Web Remoting)...

    任何用Ajax实现三级联动

    ### 使用Ajax实现三级联动的关键知识点 #### 一、三级联动的概念 三级联动是指在一个系统或应用中,通过用户的第一次选择来动态地加载第二次选择的选项列表,并进一步根据第二次选择的结果来加载第三次选择的选项...

    精通JS脚本之ExtJS框架.part2.rar

    6.4.4 Ext.query与Ext.select 6.5 应用模板 6.5.1 Ext.Template 6.5.2 Ext.XTemplate 第7章 设计表单类布局 7.1 Form表单简介 7.1.1 Form表单的基本配置 7.1.2 ExtJS对Form表单的封装 7.2 ExtJS的表单组件 ...

    精通JS脚本之ExtJS框架.part1.rar

    6.4.4 Ext.query与Ext.select 6.5 应用模板 6.5.1 Ext.Template 6.5.2 Ext.XTemplate 第7章 设计表单类布局 7.1 Form表单简介 7.1.1 Form表单的基本配置 7.1.2 ExtJS对Form表单的封装 7.2 ExtJS的表单组件 ...

Global site tag (gtag.js) - Google Analytics