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

ajax和js实现下拉列表级联的两种方式(ajax和dwr)

阅读更多

今天遇到一个问题:

有三个下拉列表,分别是:消息大类,消息中类,消息小类;要用级联的方式展现:如图:



 当选择 消息大类 时 ,刷出消息中类,内容只包含 大类选择条件下的类型!同理  选择中类 刷出小类!

(注意这里的下拉列表的值 是从数据库中查出来的,不是写死在html;

从数据库中查出来的数据,特别是中类和大类难免有些重复现象,怎么取出重复呢?看这里(使用map转换整理中)

下面用两种方法来介绍 下拉列表级联:

1.dwr方式:
具体的dwr配置请看:

下面只介绍级联用到的js:

 

 

function getChild(pareantType,childType){
		if(pareantType==null||pareantType.length<1)
			 // parentType:当前下拉列表的参数(可更具自己的查询条件,传值【可以是选中的code,或type....】) 
			 //childType:要刷出子列表的 参数(同上) 
	    {
	        return;
	    }    
	    try
	    {  
		    var id = document.getElementById(pareantType).value;
	    	MsgTypeService.getMsgType(id,childType,function(data)
	    			 // id : 查询使用到的条件,更具自己的Service用的参数,可以传零到多个 
	    			 // data: service放回的list 也就是子列表中显示的数据了
	    	{		
	    		if(data!=null)
	    		{		var oBtsTypeNumber=document.all(childType);
	    				while( oBtsTypeNumber.childNodes.length>0) {  
   								oBtsTypeNumber.removeChild(oBtsTypeNumber.childNodes(0));
   							}
   						var op= document.createElement("Option")
   						op.value="";
	    				op.text="--全部--";
	    				oBtsTypeNumber.add(op);
	    				//这里是将 子列表中数据清空
					for(i=0;i<data.length;i++)
					{
				    		var no=document.createElement("Option");
				    		 //为子列表添加数据,遍历 
				        	no.value= data[i].code;   
				          	no.text = data[i].midType; 

				          	//注意这里的 code 和midType这两个值,是 ,返回 list 的泛型(的两个字段),并且,在配置dwr.xml时要注意,和泛型相一致,否则会出现,code或midType为空或不是对象的错误警告! 
				          	oBtsTypeNumber.add(no);  
				            if("${pareantType}"==data[i].midType){
				           		no.selected="true";  	
				         	 } 	
  					 	}
	    		}
	    	});
	    }
	    catch(e)
	    {}
	}

 

 

 

,解释一下:返回list的泛型:

dwr.xml:

 

<convert converter="bean" match="com.iman.nrms.nrmwns.prm.message.domain.model.MsgType"/>	

		//  com.iman.nrms.nrmwns.prm.message.domain.model.MsgType  dwr 调用返回list 的泛型
		<create creator="spring" javascript="MsgTypeService">
            <param name="beanName" value="msgTypeService"/>
			<include method="getMsgType"/>
			<include method="getMsgMidType"/>  
			
		</create>

		在哦jsp页面代码中 用到的 code 和midType 都是 MsgType 这个po中的属性!,根据自己的需要!再在这里配置!

 

 下面就是掉 dwr的方法了:

<td width="4%" rowspan="3"><img src="${path}/page/wrm/image/search.gif" width="40" height="39"></td>
       <td nowrap="nowrap">消息大类</td>
	        
	   <td>
	    
	   <s:select list="msgBigTypeList"  name="msgType.bigType" onchange="getMidType('bigType','midType');"
	   				  id="bigType" cssClass="select" headerKey="" headerValue="--请选择--" listKey="code" listValue="bigType"></s:select>
	   
	   </td>
	   <td nowrap="nowrap">消息中类</td>
	        
	   <td>
	    
	   <s:select list="msgMidTypeList" name="msgType.midType"  onchange="getSmlType('midType','smlType');"
	   				  id="midType" cssClass="select" headerKey="" headerValue="--请选择--" listKey="code" listValue="midType"></s:select>
	   

  

方法2:(推荐使用方法)

 

这个方法首先要为每一个 </td>下拉列表写一个 function();

 

这里用到了三个下拉列表,级联了两次,就要写两个:

  

/**

 大类与中类级联
 */
    function getMidType(parentValue,childName){

    	var url= "${path}/message/getMidTypeByBigType.action";
    	var propertyName = "midType";
    	fnGetChildValueList(parentValue , childName , url , propertyName );
    }
    /**
    中类与小类级联
    */
    function getSmlType(parentValue , childName )
    {
    	
    	var url= "${path}/message/getSmlTypeByMidType.action";
    	var propertyName = "smlType";
    	fnGetChildValueList(parentValue , childName , url , propertyName);
    	
    }


    /**
     * 下拉框级联
     * @param {Object} parentValue
     * @param {Object} child 必须在当前页面的第一个Form表单中的name属性或者下拉框对象的id
     * @param {Object} url
     * @param {Object} propertyName
     * @param {String} callBack //结束后,要调用的函数名
     */
    function fnGetChildValueList(parentValue , child , url , propertyName )
    {
    	if(!parentValue||!child)
    	{
    		return;
    	}

    	var oChild = document.forms[0][child];
    	if(typeof oChild != 'undefined')
    	{
    		try{
    			oChild = $(child);
    		}catch(e){return;}
    		
    		if(!oChild){
    			return;
    		}
    	}
        var ops=oChild.options;
        while(ops.length>0){
            oChild.remove(ops.length-1);
        }
    	var oOption = document.createElement("OPTION");
    	oOption.setAttribute("text","请选择");
    	oOption.setAttribute("value","");
    	oChild.add(oOption);
    	ajax.sendPostRequest(url , propertyName + "=" + encodeURI(encodeURI(parentValue)) ,function(result){

    		eval("var keyValueList="+result.responseText);
    		for(var i=0; i<keyValueList.length; i++)
    		{
    			var keyValue=keyValueList[i];
    			var oOption = document.createElement("OPTION");
    			oOption.setAttribute("text",keyValue.value);
    			oOption.setAttribute("value",keyValue.key);
    			oChild.add(oOption);
    			
    		}
    	});
    }

 

注意这里用到的:keyValueList

要在Action中包装:

 

 

public String getMidTypeByBigType(){
		
		try {
			msgMidTypeList = this.msgTypeService.getMidTypeByBigType(java.net.URLDecoder.decode(midType, "UTF-8"));
			List<KeyValue> keyValueList = new ArrayList<KeyValue>();
			if (msgMidTypeList != null) {
				for (MsgType c : msgMidTypeList) {					
						keyValueList.add(new KeyValue(c.getCode(), c.getMidType()));
				}
			}
//			向客户端直接输出文本数据
			renderText(keyValueList.toString());
		} catch (UnsupportedEncodingException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		return null;
	}

 

 

 

 

  • 大小: 3.3 KB
2
0
分享到:
评论
1 楼 陈君宁 2012-05-17  
学到很多 感谢分享

相关推荐

    Ajax级联菜单,通过dwr框架实现省份城市级联效果

    在这个特定的场景中,我们利用Ajax技术和Direct Web Remoting(DWR)框架来创建一个动态的省份城市级联菜单。这个功能能够提升用户体验,因为它减少了用户手动刷新页面的需求,提供了流畅的交互。 首先,我们需要...

    Ajax的dwr框架实现级联

    Ajax(异步JavaScript和XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术,它极大地提升了用户体验。DWR(Direct Web Remoting)是Ajax的一个框架,它允许JavaScript与Java后端进行直接通信,实现...

    AJAX-DWR下拉框级联

    AJAX-DWR下拉框级联是Web开发中一种常见的交互设计,主要用于提高用户体验,使得用户在选择某个选项时,相关联的下拉框能够自动更新其内容,以适应不同的场景需求。在这个实验中,我们将重点探讨如何使用AJAX和DWR...

    DWR级联菜单下拉框

    首先,我们需要理解DWR的核心概念:通过AJAX(异步JavaScript和XML)技术,DWR使Java方法可以直接在客户端调用,从而实现了前后端的无缝通信。在创建级联下拉框时,通常需要以下步骤: 1. **服务器端准备**: - ...

    DWR+hibernate+spring级联下拉列表框

    在Web开发中,级联下拉列表框是一种常见的交互元素,它允许用户在选择一个选项后,根据所选选项更新另一个下拉列表框中的选项。本主题将详细讲解如何使用Direct Web Remoting (DWR)、Hibernate 和 Spring 框架来实现...

    dwr的小小运用实现下拉列表

    DWR (Direct Web Remoting) 是一个开源Java框架,它允许Web应用程序在客户端JavaScript和服务器端Java代码之间进行实时通信,无需使用XMLHttpRequest(Ajax)或其他插件。DWR简化了在Web应用中实现动态、交互式的...

    dwr实现select列表的动态级联

    在“dwr实现select列表的动态级联”这个场景中,DWR将被用来实现在前端JavaScript和后端Java之间的数据同步,以便在用户选择上级选项时动态更新下级选项列表。以下是实现这个功能的关键步骤: 1. **设置DWR配置**:...

    dwr实现2级级联菜单(sql2000 数据库)

    在IT行业中,动态Web应用程序的开发常常涉及到用户界面的交互性,其中级联菜单(Cascading Menu)是一种常见的设计模式,特别是在数据管理和导航中。DWR(Direct Web Remoting)是一个JavaScript库,它允许Java代码...

    dwr 实现 级联菜单 外加一本pdf的参考书

    通过学习这个例子和参考书,开发者不仅可以掌握DWR实现级联菜单的技术细节,还能了解到如何将服务器端和客户端有效地结合起来,提高Web应用的互动性和响应性。对于那些希望提升Web应用用户体验的开发者来说,这是一...

    ssh+dwr(实现3级联)

    SSH (Struts2 + Spring + Hibernate) 和 DWR (Direct Web Remoting) 是两种常见的Java Web开发技术。在本文中,我们将深入探讨如何将这两种技术结合,实现一个三级联动的效果。 SSH是Java企业级开发中广泛应用的一...

    ssh+dwr 3级联

    SSH(Secure Shell)和DWR(Direct Web Remoting)是两种不同的技术,它们在Web开发中各有其用途。SSH主要用于提供安全的网络服务,如远程登录、文件传输等,而DWR则是一种JavaScript到Java的远程调用技术,使得前端...

    级联菜单 java+dwr

    DWR是一种让JavaScript和Java在浏览器与服务器之间进行实时通信的技术,简化了Ajax开发。 首先,我们需要了解Java的基础知识。Java是一种面向对象的编程语言,广泛用于开发Web应用。在这个案例中,Java将作为服务器...

    DWR AJAX 简单示例

    **DWR (Direct Web Remoting) 是一个开源的Java库,它允许JavaScript在浏览器端直接调用服务器端的Java方法,实现Ajax(异步JavaScript和XML)应用。DWR简化了客户端与服务器端的交互,使得开发人员可以更加便捷地...

    纯JSP+DWR实现三级联动下拉选择菜单 实现无刷新联动 DWR判断用户是否存在 ajax二级联动菜单 DWR操作数据库模拟实现Google搜索效果

    DWR是一种JavaScript库,它使得在浏览器和服务器之间进行异步通信变得更加简单,从而实现页面的动态更新而无需刷新整个页面。 **一、DWR三级联动下拉菜单** 在Web应用中,三级联动下拉菜单常用于地理信息选择,如...

    ajaxdwr select二级联动

    在这个“ajaxdwr select二级联动”的场景中,我们将讨论如何利用这两种技术实现下拉菜单的级联选择效果。 Ajax是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。它通过JavaScript发送异步请求到服务器,...

    dwr实现聊天室+级连+搜索提示

    DWR (Direct Web Remoting) 是一个开源的Java库,它允许Web应用程序在客户端和服务器之间进行实时的、异步的通信,无需使用Ajax或Flash技术。DWR使得JavaScript可以直接调用服务器端的Java方法,简化了前端与后端的...

    struts2+dwr整合实例

    Struts2是一个基于MVC设计模式的Java EE框架,用于构建可维护性和可扩展性高的企业级应用,而DWR则是一种使得JavaScript可以调用服务器端Java方法的库,实现了AJAX(异步JavaScript和XML)的功能,提供了更丰富的...

    Struts_Hibernate_Dwr框架整合省份菜单级联

    6. **整合DWR**:在dwr.xml配置文件中注册需要暴露给JavaScript的Java方法,例如获取省份列表和根据省份ID获取城市列表的方法。 7. **前端页面**:使用HTML和JavaScript创建省份和城市的选择下拉菜单,通过DWR异步...

    DWR 联动下拉菜单基本应用

    DWR(Direct Web Remoting)是一种Java库,用于在Web应用程序中实现实时的客户端-服务器通信,使得JavaScript可以调用服务器端的Java方法,从而实现动态无刷新的页面交互。在本例中,我们将讨论如何利用DWR2版本创建...

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

    DWR是一种JavaScript库,它允许在客户端浏览器和服务器之间进行实时、异步通信,类似于AJAX,但提供了更直接的方法来调用服务器端的Java方法。通过DWR,开发者可以轻松地创建动态、交互性强的Web应用,而无需处理...

Global site tag (gtag.js) - Google Analytics