欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

用Ajax技术和dwr框架两种方式实现下拉列表的级联效果

程序员文章站 2022-05-13 12:53:51
...
在开发web页面时,常常需要达到某一个文本输入框,更多的是下拉框随另一个下拉框的改变而改变值的"联动"效果。实现这种效果,往往需要我们跟后台进行交互。
这里,我将分别介绍如何使用ajax技术和dwr框架,实现下拉列表的联动效果。

需要实现级联效果的下拉列表:
<TD nowrap="nowrap" width="15%" class="td_title">业务</TD>			 
	            <TD width="35%" nowrap="nowrap">
	            	<s:select id ="serviceId"  name="baiKuServiceVO.serviceId"
                    list="#BaiKu.serviceList" 
                    listKey="serviceId" 
                    listValue="serviceName"  
                    headerKey="0" headerValue="--请选择业务--" cssStyle="width:215px;" 
                     onchange="changeService();"></s:select>
	            </TD>


<TD noWrap class="td_title">道具代码</TD>
				<TD>
					<select id ="consumeCode_select" name="baiKuConsumeCodeMatchVO.consumeCode" style="width:215px;">
						<option value="">-请选择道具代码-</option>
					</select> 
				</TD>

现需要实现道具代码由业务的选择而改变的效果。

第一种:Ajax技术
function changeService() 
      { 
      		var serviceId = document.all.serviceId.value
			var channelId = document.all.channelId.value
			
			if (serviceId == "" || serviceId == 0)
			{
				alert("请选择业务!");
				document.all.serviceId.focus();
				return false;
			}
			
						
	        createXMLHttpRequest(); 
	     
     	 		if(serviceId != "" && serviceId != 0 && channelId != "" || channelId != 0)
     	 		{
	     	 		//业务关联道具
		        	var url="xxx!consumeCodeByServiceIdList.action?serviceId="+serviceId;
		        	xmlHttp.open("post",url,true); 
		        	xmlHttp.onreadystatechange = callback;
		        	xmlHttp.send(null); 
     	 		}
	        	
	        }
       }
      
     function callback()
     { 
		var consumeCode = document.getElementById("consumeCode");
		
		for(var i=consumeCode.options.length;i>=1;i--)
		{
             consumeCode.options.remove(i)
        }
        
        if (xmlHttp.readyState == 4)
         { 
          if (xmlHttp.status == 200) 
          { 
                result = xmlHttp.responseTEXT;//服务器返回值,假设返回值为1	
      			var arr=trim(result).split(",");
      			for(var i=0;i<arr.length-1;i++)
      			{	
      			 		var arr1 = arr[i].split(":");     			 		
      			 		
						if(arr1 == undefined)
							continue;

				document.getElementById("consumeCode_select").options[1] = new Option(arr1[2],arr1[1]); 

	                    	var txt = arr1[1];
	                    	var value = arr1[0];
	                    	var opt=new Option(arr1[1],arr1[0]);
                			document.getElementById("consumeCode_select").options[i+1]=opt;
                }
			}		
           
        }          
     }
 
(注:后台方法省略) 

第二种:dwr框架方式
使用这种方式,首先必须要前期引入:
<script type='text/javascript' src='<%=request.getContextPath()%>/dwr/engine.js'> </script>
<script type='text/javascript' src='<%=request.getContextPath()%>/dwr/util.js'> </script>
<script type='text/javascript' src='<%=request.getContextPath()%>/dwr/interface/BaiKuDwr.js'> </script>

然后dwr.xml配置文件中,也必须对用到的实体类或暴露给js使用的工具类进行相应的配置。例如:
<create creator="new" javascript="BaiKuDwr">
      <param name="class" value="com.xx.xx.xxx.xx"/>
</create>

<convert match="com.xx.hz.xx.BaiKuConsumeCodeVO" converter="bean">
</convert>


在BaiKuDwr工具类中,加上相应处理方法,例如:
public List<BaiKuConsumeCodeMatchVO> getConsumeCodeByService(String serviceId) {
	//处理过程略……	
		return null;
	}


然后JSP页面中的脚本文件:
function changeService() {
		var serviceId = document.getElementById("serviceId").value;
		
		var consumeCode = document.getElementById("consumeCode_select");
		//alert(serviceId);
		removeOptions(consumeCode);
			consumeCode.options[0] = new Option("-请选择道具代码-","");
		
		if(cpId==0){
			alert("请选择合作方");
		}
		 if(serviceId!=0 && cpId!=0) {
			
		//道具代码级联
			BaiKuDwr.getConsumeCodeByService(serviceId,cpId,function (resp){
				for (var i=0;i<resp.length;i++){
					var bean=resp[i];
					consumeCode.options[i+1] = new Option(bean.consumeName,bean.consumeCode);
				}
			});
		
			
			//清空列表
	function removeOptions(form){
		if(form.options.length>0){
			for(var i=(form.options.length-1);i>=0;i--){
				var o=form.options[i];
				form.options[i] = null;
			}	
		}
	}

注:后台方法略去……
dwr框架中结果的引用(如集合什么的)可直接用如#BaiKu.serviceList
的方式。
这里需要特别注意的就是dwr框架在js中的使用语法和他的便捷之处.

通过这两种方式,都能实现两个或多个下拉框(或者是文本框)的"级联"效果!