浏览 237 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
时间：2008-05-13
采用chain模式，可任意扩展关联个数。
index.jsp <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <script language="javascript" src="<%=request.getContextPath()%>/rela.js"></script> <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 language="javascript" src="<%=request.getContextPath()%>/rela.js"></script> --></head> <script type="text/javascript"> function init(){ var province=document.getElementById("province"); var city=document.getElementById("city"); var area=document.getElementById("area"); var pro1="01,02"; var pro2="01:北京,02:河北,03:河南"; var city1="0101,0201,0202,0301,0302"; var city2="0101:北京,0201:石家庄,0202:保定,0301:开封,0302:洛阳"; var area1="010101,010102,010103,020101,020102,020201,020202,020203"; var area2="010101:海淀区,010102:朝阳区,010103:西城区,020101:正定,020102:晋州,020201:冀州,020202:枣强,020203:饶阳"; proControl(province,city,area,pro1,pro2,city1,city2,area1,area2); } </script> <body onload="init()"> 省份:<select id="province"><%-- <option value="01">北京</option> <option value="02">河北</option> --%></select> 城市:<select id="city"><%-- <option value="0101">北京</option> --%></select> 地区:<select id="area"><%-- <option value="010101">海淀区</option> <option value="010102">朝阳区</option> <option value="010103">西城区</option> --%></select> </body> </html> rela.js /***************framework component 1**************/ //class RelaChange function RelaChange(next,relaList,codeDescList,select){ if (select==null) return ; //exception exit this.select=select; this.select.owner=this; this.select.onchange=function(){ if (this.owner.next!=null) this.owner.next.change(this.value); }; this.next=next; this.relaList=relaList; this.codeDescList=codeDescList; } RelaChange.prototype.init=function(){ this.select.options.length = 0; var codeDescList=this.codeDescList; for(var i=0;i<codeDescList.length;i++){ var item = new Option(codeDescList[i][1],codeDescList[i][0]); this.select.options.add(item); } this.select.options[0].selected = true; this.next.change(this.select.options[0].value); } RelaChange.prototype.change=function(parentKey){ //alert("parentKey:"+parentKey); var relaList=this.relaList; //alert("relaList.length:"+relaList.length); for(var i=0;i<relaList.length;i++){ if (relaList[i][0]==parentKey){ var childList=relaList[i][1]; this.update(childList); break; } } } RelaChange.prototype.update=function(keyList){ this.select.options.length = 0; var n=0; var codeDescList=this.codeDescList; //alert("codeDescList.length:"+codeDescList.length); for(var i=0;i<codeDescList.length;i++){ for(var j=0;j<keyList.length;j++){ if (codeDescList[i][0]==keyList[j]){ var item = new Option(codeDescList[i][1],codeDescList[i][0]); this.select.options.add(item); n++; break; } } if (n==keyList.length) break; } this.select.options[0].selected = true; if (this.next!=null){ this.next.change(keyList[0]); } } /*****************省份 城市 地区 具体实现*********************/ function Province(next,relaList,codeDescList,select){ RelaChange.call(this,next,relaList,codeDescList,select); } Province.prototype=new RelaChange(); function City(next,relaList,codeDescList,select){ RelaChange.call(this,next,relaList,codeDescList,select); } City.prototype=new RelaChange(); function Area(next,relaList,codeDescList,select){ RelaChange.call(this,next,relaList,codeDescList,select); } Area.prototype=new RelaChange(); /********framework component 2*************/ //Class InitRelaChange function InitRelaChange(){ this.relaList=new Array(); this.codeDescList=new Array(); } InitRelaChange.prototype.initRelaList=function(s){ }; InitRelaChange.prototype.initCodeDescList=function(s){ }; InitRelaChange.prototype.initDataList=function(s1,s2){ this.initRelaList(s1); this.initCodeDescList(s2); }; /**********省份 城市 地区 具体实现*************/ function InitProvince(){ InitRelaChange.call(this); } InitProvince.prototype=new InitRelaChange(); InitProvince.prototype.initRelaList=function(s){ } //格式: code:desc,code:desc, InitProvince.prototype.initCodeDescList=function(s){ var list=this.codeDescList; var a=s.split(","); for(var i=0;i<a.length;i++){ b=a[i].split(":"); list[i]=b; } } function InitCity(){ InitProvince.call(this); this.len=2; } InitCity.prototype=new InitProvince(); //格式:code,code InitCity.prototype.initRelaList=function(s){ var len=this.len; //alert("len:"+this.len); var list=this.relaList; //alert("s:"+s); var a=s.split(","); var s1=""; for(var i=0;i<a.length;i++){ var temp=a[i].substr(0,len)+","; if (s1.indexOf(temp)==-1){ s1+=temp; } } s1=s1.substr(0,s1.length-1); //alert("s1:"+s1); var b=s1.split(","); for(var i=0;i<b.length;i++){ var ary=new Array(); ary[0]=b[i]; ary[1]=new Array(); var n=0; for(var j=0;j<a.length;j++){ if (a[j].indexOf(b[i])==0) ary[1][n++]=a[j]; } list[i]=ary; } } function InitArea(){ InitCity.call(this); this.len=4; } InitArea.prototype=new InitCity(); /*省份 城市 地区 调用函数*/ function proControl(province,city,area,pro1,pro2,city1,city2,area1,area2){ var initObj=new InitArea(); initObj.initDataList(area1,area2); //alert("initArea.relaList.length:"+initObj.relaList.length); var areaObj=new Area(null,initObj.relaList,initObj.codeDescList,area); var initObj=new InitCity(); initObj.initDataList(city1,city2); var cityObj=new City(areaObj,initObj.relaList,initObj.codeDescList,city); var initObj=new InitProvince(); initObj.initDataList(pro1,pro2); var proObj=new Province(cityObj,initObj.relaList,initObj.codeDescList,province); proObj.init(); } 声明：JavaEye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
|
| 返回顶楼 | |
