本文共 3329 字，大约阅读时间需要 11 分钟。
此类级连下拉列表常用到，此处的代码其实是由ssh框架写成，由于代码比较多，我只取了前端的js脚本和dwr配置文件。其它的代码大家自己意会：）
本代码的亮点：
1、经过极少的修改就可以应用于N级下拉列表。
2、采用了自动判断是否要隐藏控件达到醒目的效果。
3、各类浏览器兼容性好
dwr.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd"><dwr> <allow> <!-- 转换要在映射对象中使用的类 --> <convert match="cn.qdqn.demo.biz.Databiz" converter="bean" /> <convert match="cn.qdqn.demo.entity.Data" converter="bean" /> <!-- 创建映射对象 --> <create creator="spring" javascript="DataFinder"> <param name="beanName" value="DataFinder" /> </create> </allow></dwr>
前端代码
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%><%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%><%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%><%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html:html lang="true"><head> <html:base /> <title>select.jsp</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type='text/javascript' src='/ssha_3_layer_menu_select/dwr/interface/DataFinder.js'></script> <script type='text/javascript' src='/ssha_3_layer_menu_select/dwr/engine.js'></script> <script type='text/javascript' src='/ssha_3_layer_menu_select/dwr/util.js'></script> <script type="text/javascript"> var selectIds = ['pro','city','cou'];//三级级连 有几级就在这按顺序写好 //把一个select控件初始化 function resetSelect(ele){ var sign = false; for(var i = 0; i<selectIds.length; i++){ if(ele == selectIds[i]){ sign = true; $(selectIds[i]).style.display='inline'; $(selectIds[i]).disabled=false; continue; } if(sign){ $(selectIds[i]).style.display='none'; } } } //找到级连的下一个元素 function findNextId(ele){ for(var i = 0; i<selectIds.length; i++){ if(ele == selectIds[i]){ if (i<selectIds.length-1){ return selectIds[i+1]; } } } return null; } //生成数据 function ajaxSelect(ele, data, value, label){ resetSelect(ele); DWRUtil.removeAllOptions(ele); DWRUtil.addOptions(ele,[{value:0, label:'请选择...'}],'value','label'); DWRUtil.addOptions(ele, data, value, label); DWRUtil.yellowFadeHighlightHandler(ele);//呵呵，让变动的控件变成黄色，很醒目！ //DWRUtil.highlight(ele); } function load(){ DataFinder.findAllTopList(function(msg){ ajaxSelect('pro',msg,'leafid','leafname'); }); } function selectOnchange(){ var e = window.event || arguments[0]; var ele = e.srcElement || e.target; DataFinder.findById($(ele.id).value ,function(msg){ if(msg){ var next = findNextId(ele.id); if(next){ ajaxSelect(next,msg.datas,'leafid','leafname'); } }else{ resetSelect(ele.id); } }); } function init(){ document.getElementById('bt').onclick = load; for(var i = 0; i<selectIds.length; i++){ document.getElementById(selectIds[i]).onchange = selectOnchange; } } window.onload = init; </script></head><body> <button id="bt"> 籍贯 </button> <select id="pro" style="display: none;"></select> <select id="city" style="display: none;"></select> <select id="cou" style="display: none;"></select></body></html:html>
转载地址：http://xefci.baihongyu.com/