今天遇到一个问题:
有三个下拉列表,分别是:消息大类,消息中类,消息小类;要用级联的方式展现:如图:
当选择 消息大类 时 ,刷出消息中类,内容只包含 大类选择条件下的类型!同理 选择中类 刷出小类!
(注意这里的下拉列表的值 是从数据库中查出来的,不是写死在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" οnchange="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" οnchange="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;
}