溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
<!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">
<script src="jquery-1.8.1.js"></script>
<title>JS省份三級(jí)聯(lián)動(dòng)</title>
</head>
<body>
<form action="" method="get">
<select name="province" id="province">
<option value="省份" selected="selected">省份</option>
</select>
<select name="city" id="city">
<option value="城市" selected="selected">市縣</option>
</select>
</form>
</body>
<script src="city.js"></script>
</html>
var province = document.getElementById('province');
var city = document.getElementById('city');
var provinceArr = [];
provinceArr[0] = ['北京市'];
provinceArr[1] = ['天津市'];
provinceArr[2] = ['上海市'];
provinceArr[3] = ['重慶市'];
provinceArr[4] = ['河北省'];
provinceArr[5] = ['河南省'];
provinceArr[6] = ['云南省'];
provinceArr[7] = ['遼寧省'];
provinceArr[8] = ['黑龍江省'];
provinceArr[9] = ['湖南省'];
provinceArr[10] = ['安徽省'];
provinceArr[11] = ['山東省'];
provinceArr[12] = ['新疆維吾爾自治區(qū)'];
provinceArr[13] = ['江蘇省'];
provinceArr[14] = ['浙江省'];
provinceArr[15] = ['江西省'];
provinceArr[16] = ['湖北省'];
provinceArr[17] = ['廣西壯族'];
provinceArr[18] = ['甘肅省'];
provinceArr[19] = ['山西省'];
provinceArr[20] = ['內(nèi)蒙古自治區(qū)'];
provinceArr[21] = ['陜西省'];
provinceArr[22] = ['吉林省'];
provinceArr[23] = ['福建省'];
provinceArr[24] = ['貴州省'];
provinceArr[25] = ['廣東省'];
provinceArr[26] = ['青海省'];
provinceArr[27] = ['西藏'];
provinceArr[28] = ['四川省'];
provinceArr[29] = ['寧夏回族'];
provinceArr[30] = ['海南省'];
provinceArr[31] = ['臺(tái)灣省'];
provinceArr[32] = ['香港特別行政區(qū)'];
provinceArr[33] = ['澳門特別行政區(qū)'];
//市縣,每個(gè)數(shù)組第一個(gè)元素為省份,其他的為這個(gè)省份下的市縣
var cityArr = [];
cityArr[0] = ['北京市','東城區(qū)', '西城區(qū)','崇文區(qū)','宣武區(qū)','朝陽(yáng)區(qū)','豐臺(tái)區(qū)','石景山區(qū)', '海淀區(qū)','門頭溝區(qū)', '房山區(qū)','通州區(qū)','順義區(qū)','昌平區(qū)','大興 區(qū)','懷柔區(qū)','平谷區(qū)','密云縣','延慶縣'];
cityArr[1] = ['天津市','和平區(qū)','河?xùn)|區(qū)', '河西區(qū)', '南開區(qū)', '河北區(qū)', '紅橋區(qū)', '塘沽區(qū)', '漢沽區(qū)', '大港區(qū)', '東麗區(qū)', '西青區(qū)', '津南區(qū)', '北辰區(qū)', '武清區(qū)', '寶坻區(qū)', '寧河縣', '靜?？h', '薊縣'];
cityArr[2] = ['上海市','黃浦區(qū)','盧灣區(qū)', '徐匯區(qū)','長(zhǎng)寧區(qū)','靜安區(qū)','普陀區(qū)','閘北區(qū)','虹口區(qū)', '楊浦區(qū)', '閔行區(qū)', '寶山區(qū)', '嘉定區(qū)', '浦東新區(qū)', '金山區(qū)', '松江區(qū)', '青浦區(qū)', '南匯區(qū)', '奉賢區(qū)', '崇明縣'];
cityArr[3] = ['重慶市','萬(wàn)州區(qū)','涪陵區(qū)','渝中區(qū)','大渡口區(qū)','江北區(qū)','沙坪壩區(qū)','九龍坡區(qū)','南岸區(qū)','北碚區(qū)','萬(wàn)盛區(qū)','雙橋區(qū)','渝北區(qū)','巴南區(qū)','黔江區(qū)','長(zhǎng)壽區(qū)','江津區(qū)','合川區(qū)','永川區(qū)','南川區(qū)','綦江縣','潼南縣','銅梁縣','大足縣','榮昌縣','璧山縣','梁平縣','城口縣','豐都縣','墊江縣','武隆縣','忠縣','開縣','云陽(yáng)縣','奉節(jié)縣','巫山縣','巫溪縣','石柱土家族自治縣','秀山土家族苗族自治縣','酉陽(yáng)土家族苗族自治縣','彭水苗族土家族自治縣'];
cityArr[4] = ['河北省','石家莊市', '唐山市', '秦皇島市', '邯鄲市', '邢臺(tái)市', '保定市', '張家口市', '承德市', '滄州市', '廊坊市', '衡水市'];
cityArr[5] = ['河南省','鄭州市','開封市','洛陽(yáng)市', '平頂山市', '安陽(yáng)市', '鶴壁市', '新鄉(xiāng)市', '焦作市', '濟(jì)源市', '濮陽(yáng)市', '許昌市', '漯河市', '三門峽市', '南陽(yáng)市', '商丘市', '信陽(yáng)市', '周口市', '駐馬店市'];
cityArr[6] = ['云南省','昆明市',' 曲靖市','玉溪市','保山市','昭通市','麗江市','思茅市','臨滄市','楚雄彝族自治州','紅河哈尼族彝族自治州','文山壯族苗族自治州','西雙版納傣族自治州','大理白族自治州','德宏傣族景頗族自治州','怒江傈僳族自治州','迪慶藏族自治州'];
cityArr[7] = ['遼寧省','沈陽(yáng)市' ,'大連市' ,'鞍山市' ,'撫順市' ,'本溪市' ,'丹東市' ,'錦州市' ,'營(yíng)口市' ,'阜新市' ,'遼陽(yáng)市' ,'盤錦市' ,'鐵嶺市' ,'朝陽(yáng)市' ,'葫蘆島市'];
cityArr[8] = ['黑龍江省','哈爾濱市','齊齊哈爾市','雞西市','鶴崗市','雙鴨山市', '大慶市', '伊春市', '佳木斯市', '七臺(tái)河市', '牡丹江市', '黑河市', '綏化市', '大興安嶺地區(qū)'];
cityArr[9] = ['湖南省','長(zhǎng)沙市', '株洲市','湘潭市', '衡陽(yáng)市', '邵陽(yáng)市', '岳陽(yáng)市', '常德市', '張家界市', '益陽(yáng)市', '郴州市', '永州市', '懷化市', '婁底市', '湘西土家族苗族自治州'];
cityArr[10] = ['安徽省','合肥市', '蕪湖市', '蚌埠市', '淮南市', '馬鞍山市', '淮北市', '銅陵市', '安慶市', '黃山市', '滁州市','阜陽(yáng)市','宿州市', '巢湖市', '六安市', '亳州市', '池州', '宣城市'];
cityArr[11] = ['山東省','濟(jì)南市','青島市','淄博市','棗莊市','東營(yíng)市','煙臺(tái)市','濰坊市','濟(jì)寧市','泰安市','威海市','日照市','萊蕪市','臨沂市','德州市','聊城市','濱州市','菏澤市'];
cityArr[12] = ['新疆維吾爾自治區(qū)','烏魯木齊市', '克拉瑪依市', '吐魯番地區(qū)', '哈密地區(qū)', '昌吉回族自治州 ', '博爾塔拉蒙古自治州 ', '巴音郭楞蒙古自治州 ', '阿克蘇地區(qū)', '克孜勒蘇柯爾克孜自治州 ', '喀什地區(qū)', '和田地區(qū)', '伊犁哈薩克自治州', '塔城地區(qū)', '阿勒泰地區(qū)', '石河子市', '阿拉爾市', '圖木舒克市', '五家渠市' ];
cityArr[13] = ['江蘇省','南京市', '無(wú)錫市', '徐州市', '常州市', '蘇州市', '南通市', '連云港市', '淮安市', '鹽城市', '揚(yáng)州市', '鎮(zhèn)江市', '泰州市', '宿遷市' ];
cityArr[14] = ['浙江省','杭州市', '寧波市', '溫州市', '嘉興市', '湖州市', '紹興市', '金華市', '衢州市', '舟山市', '臺(tái)州市', '麗水市'];
cityArr[15] = ['江西省','南昌市','景德鎮(zhèn)市','萍鄉(xiāng)市','九江市','新余市','鷹潭市','贛州市','吉安市','宜春市','撫州市','上饒市'];
cityArr[16] = ['湖北省','武漢市','黃石市','十堰市', '宜昌市', '襄樊市', '鄂州市', '荊門市', '孝感市', '荊州市', '黃岡市', '咸寧市', '隨州市', '恩施土家族苗族自治州','仙桃市', '潛江市', '天門市', '神農(nóng)架林區(qū)'];
cityArr[17] = ['廣西壯族','南寧市','柳州市','桂林市','梧州市','北海市','防城港市','欽州市','貴港市','玉林市','百色市','賀州市','河池市','來(lái)賓市','崇左市'];
cityArr[18] = ['甘肅省','蘭州市','嘉峪關(guān)市', '金昌市', '白銀市', '天水市', '武威市', '張掖市', '平?jīng)鍪?, '酒泉市', '慶陽(yáng)市', '定西市', '隴南市', '臨夏回族自治州', '甘南藏族自治州'];
cityArr[19] = ['山西省','太原市','大同市', '陽(yáng)泉市', '長(zhǎng)治市', '晉城市', '朔州市', '晉中市', '運(yùn)城市', '忻州市', '臨汾市', '呂梁市' ];
cityArr[20] = ['內(nèi)蒙古自治區(qū)','呼和浩特市', '包頭市', '烏海市', '赤峰市', '通遼市', '鄂爾多斯市', '呼倫貝爾市', '巴彥淖爾市', '烏蘭察布市', '興安盟', '錫林郭勒盟', '阿拉善盟' ];
cityArr[21] = ['陜西省','西安市','銅川市','寶雞市', '咸陽(yáng)市', '渭南市', '延安市', '漢中市', '榆林市', '安康市', '商洛市' ];
cityArr[22] = ['吉林省','長(zhǎng)春市', '吉林市', '四平市', '遼源市', '通化市', '白山市', '松原市', '白城市', '延邊朝鮮族自治州'];
cityArr[23] = ['福建省','福州市', '廈門市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龍巖市', '寧德市' ];
cityArr[24] = ['貴州省','貴陽(yáng)市','六盤水市', '遵義市', '安順市', '銅仁地區(qū)', '黔西南布依族苗族自治州', '畢節(jié)地區(qū)', '黔東南苗族侗族自治州', '黔南布依族苗族自治州'];
cityArr[25] = ['廣東省','廣州市','韶關(guān)市','深圳市','珠海市','汕頭市','佛山市','江門市','湛江市','茂名市','肇慶市','惠州市','梅州市','汕尾市','河源市','陽(yáng)江市','清遠(yuǎn)市','東莞市','中山市','潮州市','揭陽(yáng)市','云浮市'];
cityArr[26] = ['青海省','西寧市' ,'海東地區(qū)', '海北藏族自治州', '黃南藏族自治州', '海南藏族自治州', '果洛藏族自治州', '玉樹藏族自治州', '海西蒙古族藏族自治州'];
cityArr[27] = ['西藏','拉薩市','昌都地區(qū)', '山南地區(qū)', '日喀則地市', '那曲地區(qū)', '阿里地區(qū)', '林芝地區(qū)' ];
cityArr[28] = ['四川省','成都市','自貢市', '攀枝花市', '瀘州市', '德陽(yáng)市', '綿陽(yáng)市', '廣元市', '遂寧市', '內(nèi)江市', '樂山市', '南充市', '眉山市', '宜賓市', '廣安市', '達(dá)州市', '雅安市', '巴中市', '資陽(yáng)市', '阿壩藏族羌族自治州', '甘孜藏族自治州', '涼山彝族自治州'];
cityArr[29] = ['寧夏回族','銀川市','石嘴山市','吳忠市','固原市','中衛(wèi)市'];
cityArr[30] = ['海南省','?？谑?,'三亞市','五指山市', '瓊海市', '儋州市', '文昌市', '萬(wàn)寧市', '東方市', '定安縣', '屯昌縣', '澄邁縣', '臨高縣', '白沙黎族自治縣', '昌江黎族自治縣', '樂東黎族自治縣', '陵水黎族自治縣', '保亭黎族苗族自治縣', '瓊中黎族苗族自治縣' ];
cityArr[31] = ['臺(tái)灣省','臺(tái)北市', '高雄市', '基隆市', '臺(tái)中市', '臺(tái)南市', '新竹市', '嘉義市'];
cityArr[32] = ['香港特別行政區(qū)','中西區(qū)', '灣仔區(qū)', '東區(qū)', '南區(qū)', '油尖旺區(qū)', '深水埗區(qū)', '九龍城區(qū)', '黃大仙區(qū)', '觀塘區(qū)', '荃灣區(qū)', '葵青區(qū)', '沙田區(qū)', '西貢區(qū)', '大埔區(qū)', '北區(qū)', '元朗區(qū)', '屯門區(qū)', '離島區(qū)' ];
cityArr[33] = ['澳門特別行政區(qū)','澳門'];
//生成省份
for(var key in provinceArr) {
var provinceOption = document.createElement('option');
provinceOption.value = provinceOption.text = provinceArr[key];
province.options.add(provinceOption);
}
//生成市縣、區(qū)市'
//@current為當(dāng)前選擇的select節(jié)點(diǎn)，即父類節(jié)點(diǎn)
//@child為子類點(diǎn)
//@childArr為子節(jié)點(diǎn)數(shù)組
function showChild(current, child, childArr) {
var currentValue = current.value;
var count = childArr.length;
//每次切換市'把城市的子option長(zhǎng)度設(shè)置市',即清除城市的選擇,DOM對(duì)象select元素是長(zhǎng)度是子option的個(gè)市'
child.length = 1;
for(var i = 0; i < count; i++) {
//判斷所選的值即父類，與當(dāng)前節(jié)點(diǎn)第一個(gè)數(shù)組元素是否相市'
if(currentValue == childArr[i][0]) {
//不取第一個(gè)數(shù)組元市'因?yàn)榈谝粋€(gè)是父類，所以j市'開始，而不市'
for(var j = 1; j < childArr[i].length; j++) {
var childOption = document.createElement('option');
//ie不支持option對(duì)象的value,所以加childOption.text
childOption.value = childOption.text = childArr[i][j];
child.options.add(childOption);
}
}
}
}
//省份改變市'
province.onchange = function() {
showChild(province, city, cityArr);
}
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
