作者:ybcola
这段js代码是很久以前的作品了,应该在一年以前吧!当时是在做一个农村人才管理系统的时候遇到的问题,因为系统要求参选择并通过后台添加省市区县甚至到乡镇村队,而在对人才的信息进行修改时要求用下拉列表进行选择,并且每个人才来源可能是省市,或者省市区县,或者一直取队都要选择!那时第一反映就是找网上是否有现成的代码,找到一个最常用的就是省市二级联动,那时那段js代码在网上随处可见,可是拿过来对我来说没用,因为我需要的是一个多级联通并且可以自由扩展的代码!最终还是自己动手写了JS代码。
为了考虑在同一个页面中多处使用,因些使用了对象的思想进行设计,为了实现各个多级联动的内容不同,所以把内空数据结构与程序进行了分离,因此设计最终调用方法如:
var city=new LightManAddressTree;
city.selectshow(obj,0); //obj为要添加到的dom结点,
如有html代码如下<div id="abc"></div>
那么调用方法就应该为
obj=document.getElementById("abc");
var city=new LightManAddressTree;
city.selectshow(obj,0);
这样多级联动内容就为显示在闭合的div标签内的位置
其js设计代码如下:
代码如下:
//定义地址数据开始
var AddressTree={};
AddressTree["a_row"]=new Array(); //存所有记录
with(AddressTree){
a_row["1"]=["北京市",0,1];
a_row["2"]=["上海市",0,1];
a_row["3"]=["天津市",0,1];
a_row["4"]=["重庆市",0,1];
a_row["5"]=["河北",0,0];
a_row["6"]=["山西",0,0];
a_row["7"]=["内蒙古",0,0];
a_row["8"]=["辽宁",0,0];
a_row["9"]=["吉林",0,0];
a_row["10"]=["黑龙江",0,0];
a_row["11"]=["江苏",0,0];
a_row["12"]=["渐江",0,0];
a_row["13"]=["安徽",0,0];
a_row["14"]=["福建",0,0];
a_row["15"]=["江西",0,0];
a_row["16"]=["山东",0,0];
a_row["17"]=["河南",0,0];
a_row["18"]=["湖北",0,0];
a_row["19"]=["湖南",0,0];
a_row["20"]=["广东",0,0];
a_row["21"]=["广西",0,0];
a_row["22"]=["海南",0,0];
a_row["23"]=["四川",0,0];
a_row["24"]=["贵州",0,0];
a_row["25"]=["云南",0,0];
a_row["26"]=["西藏",0,0];
a_row["27"]=["陕西",0,0];
a_row["28"]=["甘肃",0,0];
a_row["29"]=["青海",0,0];
a_row["30"]=["宁夏",0,0];
a_row["31"]=["新壃",0,0];
a_row["32"]=["香港",0,1];
a_row["33"]=["澳门",0,1];
a_row["34"]=["台湾",0,0];
a_row["35"]=["石家庄",5,1];
a_row["36"]=["唐山",5,1];
a_row["37"]=["秦皇岛",5,1];
a_row["38"]=["邯郸",5,1];
a_row["39"]=["邢台",5,1];
a_row["40"]=["保定",5,1];
a_row["41"]=["张家口",5,1];
a_row["42"]=["承德",5,1];
a_row["43"]=["沧州",5,1];
a_row["44"]=["廊坊",5,1];
a_row["45"]=["衡水",5,1];
a_row["46"]=["太原",6,1];