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

在开发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.valuevar channelId = document.all.channelId.valueif (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中的使用语法和他的便捷之处.

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