三级联动---城市地区选择

三级联动---城市地区选择

有关数据源指给出了部分，仅作参考，其中提供了北京和天津两组数据作为测试用。

示例展示：

选择城市选择区县选择地区

// (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 = "";
for(var i=0,j=data.city.length;i"+ data.city[i][0]+"";
}
cityHtml+="";
$("#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 = "";
for(var i=0,j=data.county[tmp].length;i"+data.county[tmp][i][0]+"";
}
$("#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 = "";
for(var i=0,j=data.place[tmp].length;i"+data.place[tmp][i][0]+"";
}
$("#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);
// ]]>

示例代码：

<!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>

运行代码