實(shí)現(xiàn)二級(jí)地域的選擇，前端大概有兩種表現(xiàn)形式，第一，你是去放上兩個(gè)文本框，點(diǎn)擊文本框一的時(shí)候，出現(xiàn)省列表，點(diǎn)擊文本框二的時(shí)候，出現(xiàn)該省的市區(qū)列表；第二種就是放兩個(gè)下拉框了，在第一個(gè)下拉框選中一個(gè)，再到第二個(gè)去選中相應(yīng)的市區(qū)，當(dāng)然還有別的方式，我這里就做一種，即下拉選擇的，代碼如下：
Html代碼
<!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>無(wú)標(biāo)題文檔</title>
</head>
<body>
<script type="text/javascript">
function initcity(city) {
switch (document.creator["province"].value) {
case "安徽" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "合肥(*)", "合肥", "安慶", "安慶", "蚌埠", "蚌埠", "亳州", "亳州", "巢湖", "巢湖", "滁州", "滁州", "阜陽(yáng)", "阜陽(yáng)", "貴池", "貴池", "淮北", "淮北", "淮化", "淮化", "淮南", "淮南", "黃山", "黃山", "九華山", "九華山", "六安", "六安", "馬鞍山", "馬鞍山", "宿州", "宿州", "銅陵", "銅陵", "屯溪", "屯溪", "蕪湖", "蕪湖", "宣城", "宣城"); break;
case "北京" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "東城", "東城", "西城", "西城", "崇文", "崇文", "宣武", "宣武", "朝陽(yáng)", "朝陽(yáng)", "豐臺(tái)", "豐臺(tái)", "石景山", "石景山", "海淀", "海淀", "門(mén)頭溝", "門(mén)頭溝", "房山", "房山", "通州", "通州", "順義", "順義", "昌平", "昌平", "大興", "大興", "平谷", "平谷", "懷柔", "懷柔", "密云", "密云", "延慶", "延慶"); break;
case "重慶" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "萬(wàn)州", "萬(wàn)州", "涪陵", "涪陵", "渝中", "渝中", "大渡口", "大渡口", "江北", "江北", "沙坪壩", "沙坪壩", "九龍坡","九龍坡", "南岸", "南岸", "北碚", "北碚", "萬(wàn)盛", "萬(wàn)盛", "雙撟", "雙撟", "渝北", "渝北", "巴南", "巴南", "黔江", "黔江", "長(zhǎng)壽", "長(zhǎng)壽", "綦江", "綦江", "潼南", "潼南", "銅梁", "銅梁", "大足", "大足", "榮昌", "榮昌", "壁山", "壁山", "梁平", "梁平", "城口", "城口", "豐都", "豐都", "墊江", "墊江", "武隆", "武隆", "忠縣", "忠縣", "開(kāi)縣", "開(kāi)縣", "云陽(yáng)", "云陽(yáng)", "奉節(jié)", "奉節(jié)", "巫山", "巫山", "巫溪", "巫溪", "石柱", "石柱", "秀山", "秀山", "酉陽(yáng)", "酉陽(yáng)", "彭水", "彭水", "江津", "江津", "合川", "合川", "永川", "永川", "南川", "南川"); break;
case "福建" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "福州(*)", "福州", "福安", "福安", "龍巖", "龍巖", "南平", "南平", "寧德", "寧德", "莆田", "莆田", "泉州", "泉州", "三明", "三明", "邵武", "邵武", "石獅", "石獅", "永安", "永安", "武夷山", "武夷山", "廈門(mén)", "廈門(mén)", "漳州", "漳州"); break;
case "甘肅" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "蘭州(*)", "蘭州", "白銀", "白銀", "定西", "定西", "敦煌", "敦煌", "甘南", "甘南", "金昌", "金昌", "酒泉", "酒泉", "臨夏", "臨夏", "平?jīng)?, "平?jīng)?, "天水", "天水", "武都", "武都", "武威", "武威", "西峰", "西峰", "張掖", "張掖"); break;
case "廣東" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "廣州(*)", "廣州", "潮陽(yáng)", "潮陽(yáng)", "潮州", "潮州", "澄海", "澄海", "東莞", "東莞", "佛山", "佛山", "河源", "河源", "惠州", "惠州", "江門(mén)", "江門(mén)", "揭陽(yáng)", "揭陽(yáng)", "開(kāi)平", "開(kāi)平", "茂名", "茂名", "梅州", "梅州", "清遠(yuǎn)", "清遠(yuǎn)", "汕頭", "汕頭", "汕尾", "汕尾", "韶關(guān)", "韶關(guān)", "深圳", "深圳", "順德", "順德", "陽(yáng)江", "陽(yáng)江", "英德", "英德", "云浮", "云浮", "增城", "增城", "湛江", "湛江", "肇慶", "肇慶", "中山", "中山", "珠海", "珠海"); break;
case "廣西" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "南寧(*)", "南寧", "百色", "百色", "北海", "北海", "桂林", "桂林", "防城港", "防城港", "河池", "河池", "賀州", "賀州", "柳州", "柳州", "欽州", "欽州", "梧州", "梧州", "玉林", "玉林"); break;
case "貴州" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "貴陽(yáng)(*)", "貴陽(yáng)", "安順", "安順", "畢節(jié)", "畢節(jié)", "都勻", "都勻", "凱里", "凱里", "六盤(pán)水", "六盤(pán)水", "銅仁", "銅仁", "興義", "興義", "玉屏", "玉屏", "遵義", "遵義"); break;
case "海南" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "海口(*)", "海口", "儋縣", "儋縣", "陵水", "陵水", "瓊海", "瓊海", "三亞", "三亞", "通什", "通什", "萬(wàn)寧", "萬(wàn)寧"); break;
case "河北" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "石家莊(*)", "石家莊", "保定", "保定", "北戴河", "北戴河", "滄州", "滄州", "承德", "承德", "豐潤(rùn)", "豐潤(rùn)", "邯鄲", "邯鄲", "衡水", "衡水", "廊坊", "廊坊", "南戴河", "南戴河", "秦皇島", "秦皇島", "唐山", "唐山", "新城", "新城", "邢臺(tái)", "邢臺(tái)", "張家口", "張家口"); break;
case "黑龍江" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "哈爾濱(*)", "哈爾濱", "北安", "北安", "大慶", "大慶", "大興安嶺", "大興安嶺", "鶴崗", "鶴崗", "黑河", "黑河", "佳木斯", "佳木斯", "雞西", "雞西", "牡丹江", "牡丹江", "齊齊哈爾", "齊齊哈爾", "七臺(tái)河", "七臺(tái)河", "雙鴨山", "雙鴨山", "綏化", "綏化", "伊春", "伊春"); break;
case "河南" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "鄭州(*)", "鄭州", "安陽(yáng)", "安陽(yáng)", "鶴壁", "鶴壁", "潢川", "潢川", "焦作", "焦作", "濟(jì)源", "濟(jì)源", "開(kāi)封", "開(kāi)封", "漯河", "漯河", "洛陽(yáng)", "洛陽(yáng)", "南陽(yáng)", "南陽(yáng)", "平頂山", "平頂山", "濮陽(yáng)", "濮陽(yáng)", "三門(mén)峽", "三門(mén)峽", "商丘", "商丘", "新鄉(xiāng)", "新鄉(xiāng)", "信陽(yáng)", "信陽(yáng)", "許昌", "許昌", "周口", "周口", "駐馬店", "駐馬店"); break;
case "香港" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "香港", "香港", "九龍", "九龍", "新界", "新界"); break;
case "湖北" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "武漢(*)", "武漢", "恩施", "恩施", "鄂州", "鄂州", "黃岡", "黃岡", "黃石", "黃石", "荊門(mén)", "荊門(mén)", "荊州", "荊州", "潛江", "潛江", "十堰", "十堰", "隨州", "隨州", "武穴", "武穴", "仙桃", "仙桃", "咸寧", "咸寧", "襄陽(yáng)", "襄陽(yáng)", "襄樊", "襄樊", "孝感", "孝感", "宜昌", "宜昌"); break;
case "湖南" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "長(zhǎng)沙(*)", "長(zhǎng)沙", "常德", "常德", "郴州", "郴州", "衡陽(yáng)", "衡陽(yáng)", "懷化", "懷化", "吉首", "吉首", "婁底", "婁底", "邵陽(yáng)", "邵陽(yáng)", "湘潭", "湘潭", "益陽(yáng)", "益陽(yáng)", "岳陽(yáng)", "岳陽(yáng)", "永州", "永州", "張家界", "張家界", "株洲", "株洲"); break;
case "江蘇" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "南京(*)", "南京", "常熟", "常熟", "常州", "常州", "海門(mén)", "海門(mén)", "淮安", "淮安", "江都", "江都", "江陰", "江陰", "昆山", "昆山", "連云港", "連云港", "南通", "南通", "啟東", "啟東", "沭陽(yáng)", "沭陽(yáng)", "宿遷", "宿遷", "蘇州", "蘇州", "太倉(cāng)", "太倉(cāng)", "泰州", "泰州", "同里", "同里", "無(wú)錫", "無(wú)錫", "徐州", "徐州", "鹽城", "鹽城", "揚(yáng)州", "揚(yáng)州", "宜興", "宜興", "儀征", "儀征", "張家港", "張家港", "鎮(zhèn)江", "鎮(zhèn)江", "周莊", "周莊"); break;
case "江西" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "南昌(*)", "南昌", "撫州", "撫州", "贛州", "贛州", "吉安", "吉安", "景德鎮(zhèn)", "景德鎮(zhèn)", "井岡山", "井岡山", "九江", "九江", "廬山", "廬山", "萍鄉(xiāng)", "萍鄉(xiāng)", "上饒", "上饒", "新余", "新余", "宜春", "宜春", "鷹潭", "鷹潭"); break;
case "吉林" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "長(zhǎng)春(*)", "長(zhǎng)春", "白城", "白城", "白山", "白山", "琿春", "琿春", "遼源", "遼源", "梅河", "梅河", "吉林", "吉林", "四平", "四平", "松原", "松原", "通化", "通化", "延吉", "延吉"); break;
case "遼寧" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "沈陽(yáng)(*)", "沈陽(yáng)", "鞍山", "鞍山", "本溪", "本溪", "朝陽(yáng)", "朝陽(yáng)", "大連", "大連", "丹東", "丹東", "撫順", "撫順", "阜新", "阜新", "葫蘆島", "葫蘆島", "錦州", "錦州", "遼陽(yáng)", "遼陽(yáng)", "盤(pán)錦", "盤(pán)錦", "鐵嶺", "鐵嶺", "營(yíng)口", "營(yíng)口"); break;
case "澳門(mén)" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "澳門(mén)", "澳門(mén)"); break;
case "內(nèi)蒙古" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "呼和浩特(*)", "呼和浩特", "阿拉善盟", "阿拉善盟", "包頭", "包頭", "赤峰", "赤峰", "東勝", "東勝", "海拉爾", "海拉爾", "集寧", "集寧", "臨河", "臨河", "通遼", "通遼", "烏海", "烏海", "烏蘭浩特", "烏蘭浩特", "錫林浩特", "錫林浩特"); break;
case "寧夏" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "銀川(*)", "銀川", "固源", "固源", "石嘴山", "石嘴山", "吳忠", "吳忠"); break;
case "青海" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "西寧(*)", "西寧", "德令哈", "德令哈", "格爾木", "格爾木", "共和", "共和", "海東", "海東", "海晏", "海晏", "瑪沁", "瑪沁", "同仁", "同仁", "玉樹(shù)", "玉樹(shù)"); break;
case "山東" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "濟(jì)南(*)", "濟(jì)南", "濱州", "濱州", "兗州", "兗州", "德州", "德州", "東營(yíng)", "東營(yíng)", "菏澤", "菏澤", "濟(jì)寧", "濟(jì)寧", "萊蕪", "萊蕪", "聊城", "聊城", "臨沂", "臨沂", "蓬萊", "蓬萊", "青島", "青島", "曲阜", "曲阜", "日照", "日照", "泰安", "泰安", "濰坊", "濰坊", "威海", "威海", "煙臺(tái)", "煙臺(tái)", "棗莊", "棗莊", "淄博", "淄博"); break;
case "上海" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "崇明", "崇明", "黃浦", "黃浦", "盧灣", "盧灣", "徐匯", "徐匯", "長(zhǎng)寧", "長(zhǎng)寧", "靜安", "靜安", "普陀", "普陀", "閘北", "閘北", "虹口", "虹口", "楊浦", "楊浦", "閔行", "閔行", "寶山", "寶山", "嘉定", "嘉定", "浦東", "浦東", "金山", "金山", "松江", "松江", "青浦", "青浦", "南匯", "南匯", "奉賢", "奉賢"); break;
case "山西" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "太原(*)", "太原", "長(zhǎng)治", "長(zhǎng)治", "大同", "大同", "候馬", "候馬", "晉城", "晉城", "離石", "離石", "臨汾", "臨汾", "寧武", "寧武", "朔州", "朔州", "忻州", "忻州", "陽(yáng)泉", "陽(yáng)泉", "榆次", "榆次", "運(yùn)城", "運(yùn)城"); break;
case "陜西" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "西安(*)", "西安", "安康", "安康", "寶雞", "寶雞", "漢中", "漢中", "渭南", "渭南", "商州", "商州", "綏德", "綏德", "銅川", "銅川", "咸陽(yáng)", "咸陽(yáng)", "延安", "延安", "榆林", "榆林"); break;
case "四川" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "成都(*)", "成都", "巴中", "巴中", "達(dá)川", "達(dá)川", "德陽(yáng)", "德陽(yáng)", "都江堰", "都江堰", "峨眉山", "峨眉山", "涪陵", "涪陵", "廣安", "廣安", "廣元", "廣元", "九寨溝", "九寨溝", "康定", "康定", "樂(lè)山", "樂(lè)山", "瀘州", "瀘州", "馬爾康", "馬爾康", "綿陽(yáng)", "綿陽(yáng)", "眉山", "眉山", "南充", "南充", "內(nèi)江", "內(nèi)江", "攀枝花", "攀枝花", "遂寧", "遂寧", "汶川", "汶川", "西昌", "西昌", "雅安", "雅安", "宜賓", "宜賓", "自貢", "自貢", "資陽(yáng)", "資陽(yáng)"); break;
case "臺(tái)灣" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "臺(tái)北(*)", "臺(tái)北", "基隆", "基隆", "臺(tái)南", "臺(tái)南", "臺(tái)中", "臺(tái)中", "高雄", "高雄", "屏東", "屏東", "南投", "南投", "云林", "云林", "新竹", "新竹", "彰化", "彰化", "苗栗", "苗栗", "嘉義", "嘉義", "花蓮", "花蓮", "桃園", "桃園", "宜蘭", "宜蘭", "臺(tái)東", "臺(tái)東", "金門(mén)", "金門(mén)", "馬祖", "馬祖", "澎湖", "澎湖"); break;
case "天津" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "天津", "天津", "和平", "和平", "東麗", "東麗", "河?xùn)|", "河?xùn)|", "西青", "西青", "河西", "河西", "津南", "津南", "南開(kāi)", "南開(kāi)", "北辰", "北辰", "河北", "河北", "武清", "武清", "紅撟", "紅撟", "塘沽", "塘沽", "漢沽", "漢沽", "大港", "大港", "寧河", "寧河", "靜海", "靜海", "寶坻", "寶坻", "薊縣", "薊縣" ); break;
case "新疆" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "烏魯木齊(*)", "烏魯木齊", "阿克蘇", "阿克蘇", "阿勒泰", "阿勒泰", "阿圖什", "阿圖什", "博樂(lè)", "博樂(lè)", "昌吉", "昌吉", "東山", "東山", "哈密", "哈密", "和田", "和田", "喀什", "喀什", "克拉瑪依", "克拉瑪依", "庫(kù)車", "庫(kù)車", "庫(kù)爾勒", "庫(kù)爾勒", "奎屯", "奎屯", "石河子", "石河子", "塔城", "塔城", "吐魯番", "吐魯番", "伊寧", "伊寧"); break;
case "西藏" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "拉薩(*)", "拉薩", "阿里", "阿里", "昌都", "昌都", "林芝", "林芝", "那曲", "那曲", "日喀則", "日喀則", "山南", "山南"); break;
case "云南" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "昆明(*)", "昆明", "大理", "大理", "保山", "保山", "楚雄", "楚雄", "大理", "大理", "東川", "東川", "個(gè)舊", "個(gè)舊", "景洪", "景洪", "開(kāi)遠(yuǎn)", "開(kāi)遠(yuǎn)", "臨滄", "臨滄", "麗江", "麗江", "六庫(kù)", "六庫(kù)", "潞西", "潞西", "曲靖", "曲靖", "思茅", "思茅", "文山", "文山", "西雙版納", "西雙版納", "玉溪", "玉溪", "中甸", "中甸", "昭通", "昭通"); break;
case "浙江" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "杭州(*)", "杭州", "安吉", "安吉", "慈溪", "慈溪", "定海", "定海", "奉化", "奉化", "海鹽", "海鹽", "黃巖", "黃巖", "湖州", "湖州", "嘉興", "嘉興", "金華", "金華", "臨安", "臨安", "臨海", "臨海", "麗水", "麗水", "寧波", "寧波", "甌海", "甌海", "平湖", "平湖", "千島湖", "千島湖", "衢州", "衢州", "江山", "江山", "瑞安", "瑞安", "紹興", "紹興", "嵊州", "嵊州", "臺(tái)州", "臺(tái)州", "溫嶺", "溫嶺", "溫州", "溫州", "余姚", "余姚", "舟山", "舟山"); break;
case "海外" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "歐洲", "歐洲", "北美", "北美", "南美", "南美", "亞洲", "亞洲", "非洲", "非洲", "大洋洲", "大洋洲"); break; default: var cityOptions = new Array("請(qǐng)選擇地區(qū)", ""); break; } document.creator["city"].options.length = 0; for(var i = 0; i < cityOptions.length/2; i++) { document.creator["city"].options[i]=new Option(cityOptions[i*2],cityOptions[i*2+1]); if (document.creator["city"].options[i].value==city){ document.creator["city"].selectedIndex = i; } } } function creatprovince(province){ var provinces = new Array( "北京", "上海", "重慶", "安徽", "福建", "甘肅", "廣東", "廣西", "貴州", "海南", "河北", "黑龍江", "河南", "香港", "湖北", "湖南", "江蘇", "江西", "吉林", "遼寧", "澳門(mén)", "內(nèi)蒙古", "寧夏", "青海", "山東", "山西", "陜西", "四川", "臺(tái)灣", "天津", "新疆", "西藏", "云南", "浙江", "海外" ); document.creator["province"].options[0]=new Option("請(qǐng)選擇省份",""); for(var i = 0; i < provinces.length; i++) { document.creator["province"].options[i+1]=new Option(provinces[i],provinces[i]); if (document.creator["province"].options[i+1].value==province){ document.creator["province"].selectedIndex = i+1; } } }
</script>
<form name=creator>
<select onchange="initcity();" name="province" >
<SCRIPT>creatprovince();</SCRIPT>
</select>
<select name="city">
<option value="">選擇城市</option>
</select>
</form>
</body>
</html>
本來(lái)打算用循環(huán)生成數(shù)組做演示的，可是想想，既然是二級(jí)地區(qū)的級(jí)聯(lián)，那還是規(guī)范些好，這樣大家看的清楚，選擇上也清晰些，雖然這篇文章大都是地名.........
