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;
	}

 

 

 

 

评论

1 楼 陈君宁 2012-05-17  

学到很多 感谢分享