重点就是全国城市的json数据，逻辑就是简单的循环查找和返回对应索引。加入变换事件的回调处理接口。效果截图和下载地址：js城市三级联动效果下载地址部分代码，运行前需要加入json格式城市数据即可：<!
重点就是全国城市的json数据，逻辑就是简单的循环查找和返回对应索引。
加入变换事件的回调处理接口。
效果截图和下载地址：js城市三级联动效果下载地址
部分代码，运行前需要加入json格式城市数据即可：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>城市三级联动</title><style type="text/css">*{ padding:0; margin:0}html,body{ height: 100%; width: 100%; position: relative; font-size:14px;}.city{ margin:20px 200px; }.selectbox{ height:50px; width:500px;background:#999;}.selectbox select{ height:30px; width:120px; margin-right:10px; border:1px solid #999; line-height:30px;}</style></head><body> <div class="city">效果1：设置省市县不同的默认项 <div id="selectbox1" class="selectbox"></div> </div> <div class="city">效果1：设置省市县相同默认项 <div id="selectbox2" class="selectbox"></div> </div> <div class="city">效果2：只显示省份，省份选择后显示城市选择，县选择同理 <div id="selectbox3" class="selectbox"></div> </div></body><script type="text/javascript">window.onload=function(){ //效果1 三级联动 new TbdCityChoice({id:"selectbox1",type:1,province:"请选择省份",city:"请选择市",town:"请选择县",names:["name1","name2","name3"], changeend:function(p,c,t){ }}).init(); //效果1 三级联动 new TbdCityChoice({id:"selectbox2",type:1,province:"请选择",city:"请选择",town:"请选择",names:["name4","name5","name6"], changeend:function(p,c,t){ alert(" 省:"+p+" 市："+c+" 县："+t); //根据返回做其他处理 }}).init(); //效果2 三级联动 new TbdCityChoice({id:"selectbox3",type:2,province:"请选择省份",city:"请选择市",town:"请选择县",names:["name7","name8","name9"], changeend:function(p,c,t){ }}).init();};</script><script type="text/javascript">/*args.id 根idargs.type 类型1 是全部显示args.province 省份默认内容args.city 市默认内容args.town 县默认内容args.names name设置args.changeend(p,c,t) 变化后的回调函数，返回对应 省份 城市 县*/function TbdCityChoice(args){ this.rootele=document.getElementById(args.id); this.type=args.type; this.province=args.province; this.city=args.city; this.town=args.town; this.nameprovince=args.names[0]; this.namecity=args.names[1]; this.nametown=args.names[2]; this.changeend=args.changeend; this.aid=null; this.bid=null; this.cid=null; this.aele=null; this.bele=null; this.cele=null; var that=this; this.onelen=mapCityChoice.length; this.init=function(){ this.appe(); this.appendone(); this.appendtwo(this.aid); this.appendthree(this.bid); this.addevent(); }; this.appe=function(){ this.aele=document.createElement("select"); this.aele.name=this.nameprovince; this.rootele.appendChild(this.aele); var tso=document.createElement("option"); tso.innerHTML=this.province; tso.value=this.province; tso.checked=true; this.aele.appendChild(tso); this.bele=document.createElement("select"); this.bele.name=this.namecity; this.rootele.appendChild(this.bele); this.cele=document.createElement("select"); this.cele.name=this.nametown; this.rootele.appendChild(this.cele); if(this.type==2){ this.bele.style.visibility="hidden"; this.cele.style.visibility="hidden"; }; }; this.appendone=function(){ for(var i=0;i<this.onelen;i++){ var opo=document.createElement("option"); opo.innerHTML=mapCityChoice[i].name; opo.value=mapCityChoice[i].name; this.aele.appendChild(opo); }; }; this.appendtwo=function(){ var tso=document.createElement("option"); tso.innerHTML=this.city; tso.value=this.city; tso.checked=true; this.bele.appendChild(tso); if(this.aid==null){ }else{ var arr=mapCityChoice[this.aid].city; for(var j=0;j<arr.length;j++){ var opo=document.createElement("option"); opo.innerHTML=arr[j].name; opo.value=arr[j].name; this.bele.appendChild(opo); }; }; }; this.appendthree=function(){ var tso=document.createElement("option"); tso.innerHTML=this.town; tso.value=this.town; tso.checked=true; this.cele.appendChild(tso); if(this.bid==null){ }else{ var arr=mapCityChoice[that.aid].city[this.bid].area; for(var j=0;j<arr.length;j++){ var opo=document.createElement("option"); opo.innerHTML=arr[j]; opo.value=arr[j]; this.cele.appendChild(opo); }; }; }; this.addevent=function(){ this.aele.onchange=function(){ if(this.value!=that.province){ that.aid=that.searchcity(this.value); if(that.type==2){ that.bele.style.visibility="visible"; that.cele.style.visibility="hidden"; }; }else{ that.aid=null; if(that.type==2){ that.bele.style.visibility="hidden"; that.cele.style.visibility="hidden"; }; }; that.bele.innerHTML=""; that.appendtwo(); that.bid=null; that.cele.innerHTML=""; that.appendthree(); that.eventchange(); }; this.bele.onchange=function(){ if(this.value!=that.city){ that.bid=that.searcharea(this.value); if(that.type==2){ that.cele.style.visibility="visible"; }; }else{ that.bid=null; if(that.type==2){ that.cele.style.visibility="hidden"; }; }; that.cele.innerHTML=""; that.appendthree(); that.eventchange(); }; this.cele.onchange=function(){ that.eventchange(); }; }; this.searchcity=function(oneval){ var s; for(var i=0;i<mapCityChoice.length;i++){ if(mapCityChoice[i].name==oneval){ s=i; break; }; }; return s; }; this.searcharea=function(twoval){ var s; for(var i=0;i<mapCityChoice[that.aid].city.length;i++){ if(mapCityChoice[that.aid].city[i].name==twoval){ s=i; break; }; }; return s; }; this.eventchange=function(){ var resultp=(that.aele.value==that.province)?false:that.aele.value; var resultc=(that.bele.value==that.city)?false:that.bele.value; var resultt=(that.cele.value==that.town)?false:that.cele.value; that.changeend(resultp,resultc,resultt); }};</script></html>