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]
..............
}
var j=0
AddressTree["a_record"]=new Array()//存储记录的记录号
for(i in AddressTree["a_row"]){AddressTree["a_record"][j++]=i}
AddressTree.ObjNumber=1
//地址选择构造函数
function LightManAddressTree(){
var Data = AddressTree//数据记录数据变量
this.noselectshow=["--请选择省份--","--请选择城市--","--请选择区县--"]//各级不选择显示值
this.grade=0//级数
this.idvalue=0//地址选择值的id号
this.text=""//地址字符串
this.listseparator=" "//地址字符串中的分隔符号
this.selectName="a_tree"+(AddressTree.ObjNumber++)+"_"
//定义地址数据结束
this.getfontpath = function(id){ //取得指定记录号的上级路径
var path = "",upid
try{
upid=(isNaN(id)?0:id)
while(upid!=0){
var upid=Data["a_row"][upid][1]
if(path!="")path=upid+","+pathelse path=upid
}
}
catch(e){}
return eval("["+path+"]")
}
//建立下列表
this.selectshowlevel=function(obj,upid,def){
var selectobj,optionobj,havedef
selectobj=document.getElementById(this.selectName+this.grade)
if(selectobj){
document.getElementById(this.selectName+this.grade).options.length=0
}else{
selectobj=document.createElement("select")
selectobj.id=this.selectName+this.grade
selectobj.grade=this.grade
selectobj.obj=this
selectobj.onchange=function(){
if(this.options[this.selectedIndex].value!=""){
this.obj.selectshow(obj,this[this.selectedIndex].value)
}
else{
if(this.obj.grade>0){
for(var i=this.grade+1i<this.obj.grade-1i++){
var df=document.getElementById(this.obj.selectName+i)
df.options.length=0
defaultoption(this.obj,df,i)
}
//最得值
getvalue(this.obj)
}
}
}
}
defaultoption(this,selectobj,this.grade)
//显示级别下数据
if(upid>=0){
for(var j=0j<Data["a_record"].lengthj++){
thisrecord=Data["a_row"][Data["a_record"][j]]
if(thisrecord[1]==upid){
optionobj=document.createElement("option")
optionobj.text=thisrecord[0]
optionobj.value=Data["a_record"][j]
selectobj.options.add(optionobj)
if(def==Data["a_record"][j]) havedef=true
}
}
}
if(havedef)selectobj.value=def
return selectobj
}
this.selectshow = function(obj,id){ //显示选中记录号
var selectobj,optionobj,thisrecord
var lastgrade,tempid=id,tempgrade
var fontpath=this.getfontpath(id)
tempgrade=this.grade
this.grade=0
//显示选中前部分内容
for (var i=0i<fontpath.lengthi++){
if(!document.getElementById(this.selectName+this.grade)){
if(i<fontpath.length-1)
this.Add(obj,this.selectshowlevel(obj,fontpath[i],fontpath[i+1]))
else
this.Add(obj,this.selectshowlevel(obj,fontpath[i],id))
}
this.grade++
}
//显示选中后部分内容
do{
lastgrade=this.selectshowlevel(obj,tempid)
tempid=lastgrade.value
if (tempid=="")tempid=-1
this.Add(obj,lastgrade)
this.grade++
}
while(lastgrade.options.length>0)
//删除多余选项
for(i=this.grade-1i<tempgrade-1i++){
obj.removeChild(document.getElementById(this.selectName+i))
}
//最得值
getvalue(this)
}
this.Add=function(obj,s){
if(s.options.length>0&&!document.getElementById(s.id))obj.appendChild(s)
}
//获取选择值
function getvalue(obj){
var sel
obj.text=""
obj.idvalue=0
for(var i=0i<obj.grade-1i++){
sel=document.getElementById(obj.selectName+i)
if(sel.value!=""){
obj.text+=(obj.text.match("\\S")==null?"":obj.listseparator)+sel.options[sel.selectedIndex].text
obj.idvalue=sel.options[sel.selectedIndex].value
}else{break}
}
}
//级别显示数据
function defaultoption(obj,sobj,g){
try{
if(obj.noselectshow[g]){
optionobj=document.createElement("option")
optionobj.text=obj.noselectshow[g]
optionobj.value=""
sobj.options.add(optionobj,0)
}
}
catch(e){}
}
} address_test.htm
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
" http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
</head>
<body>
<script type="text/javascript" src="Address.js"></script>
</body>
</html>本文来自: 脚本之家(www.jb51.net) 详细出处参考: http://www.jb51.net/article/9790.htm希望对你有帮助
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)