JavaScript實(shí)現(xiàn)常用二級(jí)省市級(jí)聯(lián)下拉列表的方法
更新時(shí)間：2015年03月25日 09:43:27 作者：feiwen
這篇文章主要介紹了JavaScript實(shí)現(xiàn)常用二級(jí)省市級(jí)聯(lián)下拉列表的方法,實(shí)例分析了javascript實(shí)現(xiàn)級(jí)聯(lián)下拉列表的技巧與相關(guān)的元素操作方法,需要的朋友可以參考下
本文實(shí)例講述了JavaScript實(shí)現(xiàn)常用二級(jí)省市級(jí)聯(lián)下拉列表的方法。分享給大家供大家參考。具體分析如下：
這里省和市的名稱都是動(dòng)態(tài)填充，選擇省后自動(dòng)填充城市
<!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>無標(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)", "石景山", "石景山", "海淀", "海淀", "門頭溝", "門頭溝", "房山", "房山", "通州", "通州", "順義", "順義", "昌平", "昌平", "大興", "大興", "平谷", "平谷", "懷柔", "懷柔", "密云", "密云", "延慶", "延慶"); break;
case "重慶" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "萬(wàn)州", "萬(wàn)州", "涪陵", "涪陵", "渝中", "渝中", "大渡口", "大渡口", "江北", "江北", "沙坪壩", "沙坪壩", "九龍坡","九龍坡", "南岸", "南岸", "北碚", "北碚", "萬(wàn)盛", "萬(wàn)盛", "雙撟", "雙撟", "渝北", "渝北", "巴南", "巴南", "黔江", "黔江", "長(zhǎng)壽", "長(zhǎng)壽", "綦江", "綦江", "潼南", "潼南", "銅梁", "銅梁", "大足", "大足", "榮昌", "榮昌", "壁山", "壁山", "梁平", "梁平", "城口", "城口", "豐都", "豐都", "墊江", "墊江", "武隆", "武隆", "忠縣", "忠縣", "開縣", "開縣", "云陽(yáng)", "云陽(yáng)", "奉節(jié)", "奉節(jié)", "巫山", "巫山", "巫溪", "巫溪", "石柱", "石柱", "秀山", "秀山", "酉陽(yáng)", "酉陽(yáng)", "彭水", "彭水", "江津", "江津", "合川", "合川", "永川", "永川", "南川", "南川"); break;
case "福建" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "福州(*)", "福州", "福安", "福安", "龍巖", "龍巖", "南平", "南平", "寧德", "寧德", "莆田", "莆田", "泉州", "泉州", "三明", "三明", "邵武", "邵武", "石獅", "石獅", "永安", "永安", "武夷山", "武夷山", "廈門", "廈門", "漳州", "漳州"); 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)", "潮州", "潮州", "澄海", "澄海", "東莞", "東莞", "佛山", "佛山", "河源", "河源", "惠州", "惠州", "江門", "江門", "揭陽(yáng)", "揭陽(yáng)", "開平", "開平", "茂名", "茂名", "梅州", "梅州", "清遠(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é)", "都勻", "都勻", "凱里", "凱里", "六盤水", "六盤水", "銅仁", "銅仁", "興義", "興義", "玉屏", "玉屏", "遵義", "遵義"); 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ì)源", "開封", "開封", "漯河", "漯河", "洛陽(yáng)", "洛陽(yáng)", "南陽(yáng)", "南陽(yáng)", "平頂山", "平頂山", "濮陽(yáng)", "濮陽(yáng)", "三門峽", "三門峽", "商丘", "商丘", "新鄉(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ū)", "", "武漢(*)", "武漢", "恩施", "恩施", "鄂州", "鄂州", "黃岡", "黃岡", "黃石", "黃石", "荊門", "荊門", "荊州", "荊州", "潛江", "潛江", "十堰", "十堰", "隨州", "隨州", "武穴", "武穴", "仙桃", "仙桃", "咸寧", "咸寧", "襄陽(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ū)", "", "南京(*)", "南京", "常熟", "常熟", "常州", "常州", "海門", "海門", "淮安", "淮安", "江都", "江都", "江陰", "江陰", "昆山", "昆山", "連云港", "連云港", "南通", "南通", "啟東", "啟東", "沭陽(yáng)", "沭陽(yáng)", "宿遷", "宿遷", "蘇州", "蘇州", "太倉(cāng)", "太倉(cāng)", "泰州", "泰州", "同里", "同里", "無錫", "無錫", "徐州", "徐州", "鹽城", "鹽城", "揚(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)", "盤錦", "盤錦", "鐵嶺", "鐵嶺", "營(yíng)口", "營(yíng)口"); break;
case "澳門" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "澳門", "澳門"); 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ū)", "", "西寧(*)", "西寧", "德令哈", "德令哈", "格爾木", "格爾木", "共和", "共和", "海東", "海東", "海晏", "海晏", "瑪沁", "瑪沁", "同仁", "同仁", "玉樹", "玉樹"); 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)", "都江堰", "都江堰", "峨眉山", "峨眉山", "涪陵", "涪陵", "廣安", "廣安", "廣元", "廣元", "九寨溝", "九寨溝", "康定", "康定", "樂山", "樂山", "瀘州", "瀘州", "馬爾康", "馬爾康", "綿陽(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)東", "金門", "金門", "馬祖", "馬祖", "澎湖", "澎湖"); break;
case "天津" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "天津", "天津", "和平", "和平", "東麗", "東麗", "河?xùn)|", "河?xùn)|", "西青", "西青", "河西", "河西", "津南", "津南", "南開", "南開", "北辰", "北辰", "河北", "河北", "武清", "武清", "紅撟", "紅撟", "塘沽", "塘沽", "漢沽", "漢沽", "大港", "大港", "寧河", "寧河", "靜海", "靜海", "寶坻", "寶坻", "薊縣", "薊縣" ); break;
case "新疆" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "烏魯木齊(*)", "烏魯木齊", "阿克蘇", "阿克蘇", "阿勒泰", "阿勒泰", "阿圖什", "阿圖什", "博樂", "博樂", "昌吉", "昌吉", "東山", "東山", "哈密", "哈密", "和田", "和田", "喀什", "喀什", "克拉瑪依", "克拉瑪依", "庫(kù)車", "庫(kù)車", "庫(kù)爾勒", "庫(kù)爾勒", "奎屯", "奎屯", "石河子", "石河子", "塔城", "塔城", "吐魯番", "吐魯番", "伊寧", "伊寧"); break;
case "西藏" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "拉薩(*)", "拉薩", "阿里", "阿里", "昌都", "昌都", "林芝", "林芝", "那曲", "那曲", "日喀則", "日喀則", "山南", "山南"); break;
case "云南" : var cityOptions = new Array( "請(qǐng)選擇地區(qū)", "", "昆明(*)", "昆明", "大理", "大理", "保山", "保山", "楚雄", "楚雄", "大理", "大理", "東川", "東川", "個(gè)舊", "個(gè)舊", "景洪", "景洪", "開遠(yuǎn)", "開遠(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( "北京", "上海", "重慶", "安徽", "福建", "甘肅", "廣東", "廣西", "貴州", "海南", "河北", "黑龍江", "河南", "香港", "湖北", "湖南", "江蘇", "江西", "吉林", "遼寧", "澳門", "內(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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
今天在頁(yè)面上使用JS時(shí)發(fā)現(xiàn)無法通過W3C驗(yàn)證,檢查了一會(huì)發(fā)現(xiàn)此方法可以屏蔽大多數(shù)JS無法通過驗(yàn)證的問題，簡(jiǎn)單實(shí)用2010-03-03
這篇文章主要介紹了微信小程序 彈窗輸入組件的實(shí)現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了通過JavaScript下載文件到本地的方法（單文件），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)自定義下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
如何通過vscode運(yùn)行調(diào)試javascript代碼
這篇文章主要介紹了如何通過vscode運(yùn)行調(diào)試javascript代碼,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
本文主要介紹了基于jQuery實(shí)現(xiàn)的簡(jiǎn)單版鍵盤自動(dòng)打字效果，具有很好的參考價(jià)值，下面就跟著小編一起來看下吧
2016-12-12 
JavaScript函數(shù)調(diào)用經(jīng)典實(shí)例代碼
JavaScript提供了4種函數(shù)調(diào)用,一般形式的函數(shù)調(diào)用、作為對(duì)象的方法調(diào)用、使用 call 和 apply 動(dòng)態(tài)調(diào)用、使用 new 間接調(diào)用,下面這篇文章主要給大家介紹了關(guān)于JavaScript函數(shù)調(diào)用的相關(guān)資料,需要的朋友可以參考下
2021-12-12 
這篇文章主要介紹了詳解babel升級(jí)到7.X采坑總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-05-05 
使javascript也能包含文件...
2006-10-10