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" cssheaderKey="" 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" cssheaderKey="" 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 blocke.printStackTrace();}return null;}?
?
?
?
1 楼 陈君宁 2012-05-17 学到很多 感谢分享