利用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>