三级联动---城市地区选择
有关数据源指给出了部分，仅作参考，其中提供了北京和天津两组数据作为测试用。
示例展示：
示例代码：
<!DOCTYPE html> <html> <head> <title>三级联动</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="views/js/libs/jquery-1.8.1.min.js"></script> <style> #choose{margin:50px; padding: 10px 5px; width: 450px; height: 30px; line-height: 30px; border:1px solid #666666; background: #FEFEFE; position: relative;} #choose .check{margin-right: 10px; padding: 3px 10px; text-align: center; background: #F1F1F1; } #choose .checkon{background: #FE6666; cursor:pointer;} #choose .city,#choose .county,#choose .place{position: absolute; left: 0px; top:55px; display: none;border:1px solid #666666;} #choose .city a,#choose .county a,#choose .place a{margin:0px 5px;white-space:nowrap; cursor: pointer;} #choose .city a:hover,#choose .county a:hover,#choose .place a:hover{border-bottom: 1px solid #FF6600;} #choose .city a.on,#choose .county a.on,#choose .place a.on{border-bottom: 1px solid #FF6600; cursor: default; color:#FF6600;} </style> </head> <body> <div id="choose"><span class="check checkon">选择城市</span><span class="check">选择区县</span><span class="check">选择地区</span></div> <script> (function(){ $(function(){ var data = {"city":[ ["北京市","A0"], ["天津市","A1"], ["河北省","A2"], ["山西省","A3"], ["内蒙古区","A4"], ["辽宁省","A5"], ["吉林省","A6"], ["黑龙江省","A7"], ["上海市","A8"], ["江苏省","A9"], ["浙江省","A10"], ["安徽省","A11"], ["福建省","A12"], ["江西省","A13"], ["山东省","A14"], ["河南省","A15"], ["湖北省","A16"], ["湖南省","A17"], ["广东省","A18"], ["广西区","A19"], ["海南省","A20"], ["重庆市","A21"], ["四川省","A22"], ["贵州省","A23"], ["云南省","A24"], ["西藏区","A25"], ["陕西省","A26"], ["甘肃省","A27"], ["青海省","A28"], ["宁夏区","A29"], ["新疆区","A30"], ["台湾省","A31"], ["香港特区","A32"], ["澳门特区","A33"] ], "county":{ "A0":[["北京辖区","A00"],["北京辖县","A01"]], "A1":[["天津辖区","A10"],["天津辖县","A11"]], "A2":[ ["石家庄市","A20"], ["唐山市","A21"], ["秦皇岛市","A22"], ["邯郸市","A23"], ["邢台市","A24"], ["保定市","A25"], ["张家口市","A26"], ["承德市","A27"], ["沧州市","A28"], ["廊坊市","A29"], ["衡水市","A210"]], "A3":[ ["太原市","A30"], ["大同市","A31"], ["阳泉市","A32"], ["长治市","A33"], ["晋城市","A34"], ["朔州市","A35"], ["晋中市","A36"], ["运城市","A37"], ["忻州市","A38"], ["临汾市","A39"], ["吕梁市","A310"]], "A4": [ ["呼和浩特市","A40"], ["包头市","A41"], ["乌海市","A42"], ["赤峰市","A43"], ["通辽市","A45"], ["鄂尔多斯市","A46"], ["呼伦贝尔市","A47"], ["巴彦淖尔市","A48"], ["乌兰察布市","A49"], ["兴安盟","A410"], ["锡林郭勒盟","A411"], ["阿拉善盟","A412"]], "A5":[ ["沈阳市","A50"], ["大连市","A51"], ["鞍山市","A52"], ["抚顺市","A53"], ["本溪市","A54"], ["丹东市","A55"], ["锦州市","A56"], ["营口市","A57"], ["阜新市","A58"], ["辽阳市","A59"], ["盘锦市","A510"], ["铁岭市","A511"], ["朝阳市","A512"], ["葫芦岛市","A513"]], "A6": [ ["长春市","A60"], ["吉林市","A61"], ["四平市","A62"], ["辽源市","A63"], ["通化市","A64"], ["白山市","A65"], ["松原市","A66"], ["白城市","A67"], ["延边自治州","A68"]], "A7": [ ["哈尔滨市","A70"], ["齐齐哈尔市","A71"], ["鸡西市","A72"], ["鹤岗市","A73"], ["双鸭山市","A74"], ["大庆市","A75"], ["伊春市","A76"], ["佳木斯市","A77"], ["七台河市","A78"], ["牡丹江市","A79"], ["黑河市","A710"], ["绥化市","A711"], ["大兴安岭地区","A712"]], "A8": [ ["上海辖区","A80"], ["上海辖县","A81"]], "A9": [ ["南京市","A90"], ["无锡市","A91"], ["徐州市","A92"], ["常州市","A93"], ["苏州市","A94"], ["南通市","A95"], ["连云港市","A96"], ["淮安市","A97"], ["盐城市","A98"], ["扬州市","A99"], ["镇江市","A910"], ["泰州市","A911"], ["宿迁市","A912"]], "A10": [ ["杭州市","A100"], ["宁波市","A101"], ["温州市","A102"], ["嘉兴市","A103"], ["湖州市","A104"], ["绍兴市","A105"], ["金华市","A106"], ["衢州市","A107"], ["舟山市","A108"], ["台州市","A109"], ["丽水市","A1010"]], "A11": [ ["合肥市","A110"], ["芜湖市","A111"], ["蚌埠市","A112"], ["淮南市","A113"], ["马鞍山市","A114"], ["淮北市","A115"], ["铜陵市","A116"], ["安庆市","A117"], ["黄山市","A118"], ["滁州市","A119"], ["阜阳市","A1110"], ["宿州市","A1111"], ["巢湖市","A1112"], ["六安市","A1113"], ["亳州市","A1114"], ["池州市","A1115"], ["宣城市","A1116"]], "A12": [ ["福州市","A120"], ["厦门市","A121"], ["莆田市","A122"], ["三明市","A123"], ["泉州市","A124"], ["漳州市","A125"], ["南平市","A126"], ["龙岩市","A127"], ["宁德市","A128"]], "A13": [ ["南昌市","A130"], ["景德镇市","A131"], ["萍乡市","A132"], ["九江市","A133"], ["新余市","A134"], ["鹰潭市","A135"], ["赣州市","A136"], ["吉安市","A137"], ["宜春市","A138"], ["抚州市","A139"], ["上饶市","A1310"]], "A14": [ ["济南市","A140"], ["青岛市","A141"], ["淄博市","A142"], ["枣庄市","A143"], ["东营市","A144"], ["烟台市","A145"], ["潍坊市","A146"], ["济宁市","A147"], ["泰安市","A148"], ["威海市","A149"], ["日照市","A1410"], ["莱芜市","A1411"], ["临沂市","A1412"], ["德州市","A1413"], ["聊城市","A1415"], ["滨州市","A1416"], ["荷泽市","A1417"]], "A15": [ ["郑州市","A150"], ["开封市","A151"], ["洛阳市","A152"], ["平顶山市","A153"], ["安阳市","A154"], ["鹤壁市","A155"], ["新乡市","A156"], ["焦作市","A157"], ["濮阳市","A158"], ["许昌市","A159"], ["漯河市","A1510"], ["三门峡市","A1511"], ["南阳市","A1512"], ["商丘市","A1513"], ["信阳市","A1514"], ["周口市","A1515"], ["驻马店市","A1516"]] }, "place":{ "A00":[ ["东城区","A000"], ["西城区","A001"], ["崇文区","A002"], ["宣武区","A003"], ["朝阳区","A004"], ["丰台区","A005"], ["石景山区","A006"], ["海淀区","A007"], ["门头沟区","A008"], ["房山区","A009"], ["通州区","A0010"], ["顺义区","A0011"], ["昌平区","A0012"], ["大兴区","A0013"], ["怀柔区","A0014"], ["平谷区","A0015"] ], "A01":[ ["密云县","A010"], ["延庆县","A011"] ], "A10":[ ["和平区","A100"], ["河东区","A101"], ["河西区","A102"], ["南开区","A103"], ["河北区","A104"], ["红桥区","A105"], ["塘沽区","A106"], ["汉沽区","A107"], ["大港区","A108"], ["东丽区","A109"], ["西青区","A1010"], ["津南区","A1011"], ["北辰区","A1012"], ["武清区","A1013"], ["宝坻区","A1014"] ], "A11":[ ["宁河县","A110"], ["静海县","A111"], ["蓟县","A112"] ] } }; var cityHtml = "<div class='city'>"; for(var i=0,j=data.city.length;i<j;i++){ cityHtml+="<a mcity="+ data.city[i][1]+">"+ data.city[i][0]+"</a>"; } cityHtml+="</div>"; $("#choose").append(cityHtml); $("#choose").find(".check").eq(0).click(function(){ $("#choose").find(".check").removeClass("checkon").eq(0).addClass("checkon"); $(".city").show(); $(".county,.place").hide(); }); var uchooseCity =""; $("#choose .city a").filter(function(index) { $(this).click(function(){ var tmp =$(this).attr("mcity"); $("#choose .city").hide().find("a").removeClass("on").eq(index).addClass("on"); $("#choose").find(".check").eq(1).addClass("checkon"); $(".county").remove(); var countyHtml = "<div class='county'>"; for(var i=0,j=data.county[tmp].length;i<j;i++){ countyHtml +="<a mcounty='"+data.county[tmp][i][1]+"'>"+data.county[tmp][i][0]+"</a>"; } $("#choose").append(countyHtml); $(".county").show(); uchooseCity = $(this).text()+"("+tmp+") "; }); }); $("#choose").find(".check").eq(1).click(function(){ $("#choose").find(".check").eq(2).removeClass("checkon"); $(".city,.place").hide(); $(".county").show(); }); var uchooseCounty =""; $("#choose .county a").live("click",function(){ var tmp = $(this).attr("mcounty"); var index = $(this).index(); $("#choose .county").hide().find("a").removeClass("on").eq(index).addClass("on"); $("#choose").find(".check").eq(2).addClass("checkon"); $(".city,.county").hide(); $(".place").remove(); var placeHtml = "<div class='place'>"; for(var i=0,j=data.place[tmp].length;i<j;i++){ placeHtml +="<a mplace='"+data.place[tmp][i][1]+"'>"+data.place[tmp][i][0]+"</a>"; } $("#choose").append(placeHtml); $(".place").show(); uchooseCounty = $(this).text() +"("+tmp+") "; }); $("#choose .place a").live("click",function(){ var tmp = $(this).attr("mplace"); var index = $(this).index(); $("#choose .place").find("a").removeClass("on").eq(index).addClass("on"); var uchoose = uchooseCity + uchooseCounty + $(this).text() +"("+tmp+") "; alert(uchoose); }); }); })(jQuery); </script> </body> </html>
