利用JOSN和Jquery写省市级联

在平时的项目中，像省市级联并不需要采用数据库，这个数据是不发生变化的，所以可以写入JSON中。

cityData.js的JSON文件如下（省市数据参考自淘宝2015年的数据）

{"cityData":[
{ "name": "北京", "cities": ["东城","西城","朝阳","丰台","石景山","海淀","门头沟","房山","通州","顺义","昌平","大兴","怀柔","平谷","密云","延庆"] },
{ "name": "天津", "cities": ["和平","河东","河西","南开","河北","红桥","东丽","西青","津南","北辰","武清","宝坻","滨海","宁河","静海","蓟县",
"塘沽区 (滨海新区)","汉沽区 (滨海新区)","大港区 (滨海新区)"] },
{ "name": "河北", "cities": ["石家庄", "秦皇岛", "廊坊", "保定", "邯郸", "唐山", "邢台", "衡水", "张家口", "承德", "衡水"] },
{ "name": "山西", "cities": ["太原","大同","阳泉","长治","晋城","朔州","晋中","运城","忻州","临汾","吕梁"] },
{ "name": "内蒙古", "cities": ["呼和浩特","包头","乌海","赤峰","通辽","鄂尔多斯","呼伦贝尔","巴彦淖尔","乌兰察布","兴安","锡林郭勒","阿拉善"] },
{ "name": "辽宁", "cities": ["大连", "沈阳", "鞍山", "抚顺", "营口", "锦州", "丹东", "朝阳", "辽阳", "阜新", "铁岭", "盘锦", "本溪", "葫芦岛"] },
{ "name": "吉林", "cities": ["长春","吉林","四平","辽源","通化","白山","松原","白城","延边朝鲜族"] },
{ "name": "黑龙江", "cities": ["哈尔滨","齐齐哈尔","鸡西","鹤岗","双鸭山","大庆","伊春","佳木斯","七台河","牡丹江","黑河","绥化","大兴安岭"] },
{ "name": "上海", "cities": ["黄浦","徐汇","长宁","静安","普陀","闸北","虹口","杨浦","闵行","宝山","嘉定","浦东","金山","松江","青浦","奉贤","崇明",
"卢湾区 (黄浦区)"] },
{ "name": "江苏", "cities": ["南京","无锡","徐州","常州","苏州","南通","连云港","淮安","盐城","扬州","镇江","泰州","宿迁"] },
{ "name": "浙江", "cities": ["杭州","宁波","温州","嘉兴","湖州","绍兴","金华","衢州","舟山","台州","丽水"] },
{ "name": "安徽", "cities": ["合肥","芜湖","蚌埠","淮南","马鞍山","淮北","铜陵","安庆","黄山","滁州","阜阳","宿州","六安","亳州","池州","宣城"] },
{ "name": "福建", "cities": ["福州","厦门","莆田","三明","泉州","漳州","南平","龙岩","宁德"] },
{ "name": "江西", "cities": ["南昌","景德镇","萍乡","九江","新余","鹰潭","赣州","吉安","宜春","抚州","上饶"] },
{ "name": "山东", "cities": ["济南","青岛","淄博","枣庄","东营","烟台","潍坊","济宁","泰安","威海","日照","莱芜","临沂","德州","聊城","滨州","菏泽"] },
{ "name": "河南", "cities": ["郑州","开封","洛阳","平顶山","安阳","鹤壁","新乡","焦作","济源","濮阳","许昌","漯河","三门峡","南阳","商丘","信阳","周口","驻马店"] },
{ "name": "湖北", "cities": ["武汉","黄石","十堰","宜昌","襄阳","鄂州","荆门","孝感","荆州","黄冈","咸宁","随州","恩施","仙桃","潜江","天门","神农架"] },
{ "name": "湖南", "cities": ["长沙","株洲","湘潭","衡阳","邵阳","岳阳","常德","张家界","益阳","郴州","永州","怀化","娄底","湘西"] },
{ "name": "广东", "cities": ["广州","韶关","深圳","珠海","汕头","佛山","江门","湛江","茂名","肇庆","惠州","梅州","汕尾","河源","阳江","清远","东莞","中山","潮州","揭阳","云浮"] },
{ "name": "广西", "cities": ["南宁","柳州","桂林","梧州","北海","防城港","钦州","贵港","玉林","百色","贺州","河池","来宾","崇左"] },
{ "name": "海南", "cities": ["海口","三亚","三沙","五指山","琼海","儋州","文昌","万宁","东方","定安","屯昌","澄迈","临高","白沙","昌江","乐东","陵水","保亭","琼中"] },
{ "name": "重庆", "cities": ["万州","涪陵","渝中","大渡口","江北","沙坪坝","九龙坡","南岸","北碚","万盛","双桥","渝北","巴南","黔江","长寿","綦江","潼南","铜梁","大足","荣昌","璧山","梁平","城口","丰都","垫江","武隆","忠县","开县","云阳","奉节","巫山","巫溪","石柱","秀山","酉阳","彭水","江津","合川","永川","南川",
"万盛区 (綦江区)","双桥区 (大足区)"] },
{ "name": "四川", "cities": ["成都","自贡","攀枝花","泸州","德阳","绵阳","广元","遂宁","内江","乐山","南充","眉山","宜宾","广安","达州","雅安","巴中","资阳","阿坝","甘孜","凉山"] },
{ "name": "贵州", "cities": ["贵阳","六盘水","遵义","安顺","铜仁","黔西南","毕节","黔东南","黔南"] },
{ "name": "云南", "cities": ["昆明","曲靖","","玉溪","保山","昭通","丽江","普洱","临沧","楚雄","红河","文山","西双版纳","大理","德宏","怒江","迪庆"] },
{ "name": "西藏", "cities": ["拉萨","昌都","山南","日喀则","那曲","阿里","林芝"] },
{ "name": "陕西", "cities": ["西安","铜川","宝鸡","咸阳","渭南","延安","汉中","榆林","安康","商洛"] },
{ "name": "甘肃", "cities": ["兰州","嘉峪关","金昌","白银","天水","武威","张掖","平凉","酒泉","庆阳","定西","陇南","临夏","甘南"] },
{ "name": "青海", "cities": ["西宁","海东","海北","黄南","海南藏族","果洛","玉树","海西"] },
{ "name": "宁夏", "cities": ["银川","石嘴山","吴忠","固原","中卫"] },
{ "name": "新疆", "cities": ["乌鲁木齐","克拉玛依","吐鲁番","哈密","昌吉","博尔塔拉","巴音郭楞","阿克苏","克孜勒苏柯尔克孜","喀什","和田","伊犁","塔城","阿勒泰","石河子","阿拉尔","图木舒克","五家渠"] }
]
}

然后利用

Jquery加载到页面，并且每次选择不同的省，会出现不同的市与之对应

<pre name="code" class="javascript"><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$.getJSON("js/cityData.js",function(data){
var dataArray = data.cityData;
$("#province").append("<option value='-1'>请选择省份</option>");
$("#city").append("<option value = '-1'>请选择市区</option>");

for(var i = 0; i < dataArray.length; i ++){
$("#province").append("<option value='"+i+"'>"+dataArray[i].name+"</option>");
}

$("#province").change(function(){
var cityArray = dataArray[this.value].cities;
$("#city").empty();

$("#city").append("<option value = '-1'>请选择市区</option>");

for( var i = 0; i < cityArray.length; i ++){
$("#city").append("<option value = '"+i+"'>"+cityArray[i]+"</option>");
}
});
});
});

</script>

html的代码：

<body>
省:<select id="province"></select>
市:<select id="city"></select>

</body>