<!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省份三級聯動</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] = ['新疆維吾爾自治區'];
provinceArr[13] = ['江蘇省'];
provinceArr[14] = ['浙江省'];
provinceArr[15] = ['江西省'];
provinceArr[16] = ['湖北省'];
provinceArr[17] = ['廣西壯族'];
provinceArr[18] = ['甘肅省'];
provinceArr[19] = ['山西省'];
provinceArr[20] = ['內蒙古自治區'];
provinceArr[21] = ['陝西省'];
provinceArr[22] = ['吉林省'];
provinceArr[23] = ['福建省'];
provinceArr[24] = ['貴州省'];
provinceArr[25] = ['廣東省'];
provinceArr[26] = ['青海省'];
provinceArr[27] = ['西藏'];
provinceArr[28] = ['四川省'];
provinceArr[29] = ['寧夏回族'];
provinceArr[30] = ['海南省'];
provinceArr[31] = ['臺灣省'];
provinceArr[32] = ['香港特別行政區'];
provinceArr[33] = ['澳門特別行政區'];
//市縣,每個數組第一個元素爲省份,其他的爲這個省份下的市縣
var cityArr = [];
cityArr[0] = ['北京市','東城區', '西城區','崇文區','宣武區','朝陽區','豐臺區','石景山區', '海淀區','門頭溝區', '房山區','通州區','順義區','昌平區','大興 區','懷柔區','平谷區','密雲縣','延慶縣'];
cityArr[1] = ['天津市','和平區','河東區', '河西區', '南開區', '河北區', '紅橋區', '塘沽區', '漢沽區', '大港區', '東麗區', '西青區', '津南區', '北辰區', '武清區', '寶坻區', '寧河縣', '靜海縣', '薊縣'];
cityArr[2] = ['上海市','黃浦區','盧灣區', '徐彙區','長寧區','靜安區','普陀區','閘北區','虹口區', '楊浦區', '閔行區', '寶山區', '嘉定區', '浦東新區', '金山區', '松江區', '青浦區', '南匯區', '奉賢區', '崇明縣'];
cityArr[3] = ['重慶市','萬州區','涪陵區','渝中區','大渡口區','江北區','沙坪壩區','九龍坡區','南岸區','北碚區','萬盛區','雙橋區','渝北區','巴南區','黔江區','長壽區','江津區','合川區','永川區','南川區','綦江縣','潼南縣','銅梁縣','大足縣','榮昌縣','璧山縣','梁平縣','城口縣','豐都縣','墊江縣','武隆縣','忠縣','開縣','雲陽縣','奉節縣','巫山縣','巫溪縣','石柱土家族自治縣','秀山土家族苗族自治縣','酉陽土家族苗族自治縣','彭水苗族土家族自治縣'];
cityArr[4] = ['河北省','石家莊市', '唐山市', '秦皇島市', '邯鄲市', '邢臺市', '保定市', '張家口市', '承德市', '滄州市', '廊坊市', '衡水市'];
cityArr[5] = ['河南省','鄭州市','開封市','洛陽市', '平頂山市', '安陽市', '鶴壁市', '新鄉市', '焦作市', '濟源市', '濮陽市', '許昌市', '漯河市', '三門峽市', '南陽市', '商丘市', '信陽市', '周口市', '駐馬店市'];
cityArr[6] = ['雲南省','昆明市',' 曲靖市','玉溪市','保山市','昭通市','麗江市','思茅市','臨滄市','楚雄彝族自治州','紅河哈尼族彝族自治州','文山壯族苗族自治州','西雙版納傣族自治州','大理白族自治州','德宏傣族景頗族自治州','怒江傈僳族自治州','迪慶藏族自治州'];
cityArr[7] = ['遼寧省','瀋陽市' ,'大連市' ,'鞍山市' ,'撫順市' ,'本溪市' ,'丹東市' ,'錦州市' ,'營口市' ,'阜新市' ,'遼陽市' ,'盤錦市' ,'鐵嶺市' ,'朝陽市' ,'葫蘆島市'];
cityArr[8] = ['黑龍江省','哈爾濱市','齊齊哈爾市','雞西市','鶴崗市','雙鴨山市', '大慶市', '伊春市', '佳木斯市', '七臺河市', '牡丹江市', '黑河市', '綏化市', '大興安嶺地區'];
cityArr[9] = ['湖南省','長沙市', '株洲市','湘潭市', '衡陽市', '邵陽市', '岳陽市', '常德市', '張家界市', '益陽市', '郴州市', '永州市', '懷化市', '婁底市', '湘西土家族苗族自治州'];
cityArr[10] = ['安徽省','合肥市', '蕪湖市', '蚌埠市', '淮南市', '馬鞍山市', '淮北市', '銅陵市', '安慶市', '黃山市', '滁州市','阜陽市','宿州市', '巢湖市', '六安市', '亳州市', '池州', '宣城市'];
cityArr[11] = ['山東省','濟南市','青島市','淄博市','棗莊市','東營市','煙臺市','濰坊市','濟寧市','泰安市','威海市','日照市','萊蕪市','臨沂市','德州市','聊城市','濱州市','菏澤市'];
cityArr[12] = ['新疆維吾爾自治區','烏魯木齊市', '克拉瑪依市', '吐魯番地區', '哈密地區', '昌吉回族自治州 ', '博爾塔拉蒙古自治州 ', '巴音郭楞蒙古自治州 ', '阿克蘇地區', '克孜勒蘇柯爾克孜自治州 ', '喀什地區', '和田地區', '伊犁哈薩克自治州', '塔城地區', '阿勒泰地區', '石河子市', '阿拉爾市', '圖木舒克市', '五家渠市' ];
cityArr[13] = ['江蘇省','南京市', '無錫市', '徐州市', '常州市', '蘇州市', '南通市', '連雲港市', '淮安市', '鹽城市', '揚州市', '鎮江市', '泰州市', '宿遷市' ];
cityArr[14] = ['浙江省','杭州市', '寧波市', '溫州市', '嘉興市', '湖州市', '紹興市', '金華市', '衢州市', '舟山市', '台州市', '麗水市'];
cityArr[15] = ['江西省','南昌市','景德鎮市','萍鄉市','九江市','新餘市','鷹潭市','贛州市','吉安市','宜春市','撫州市','上饒市'];
cityArr[16] = ['湖北省','武漢市','黃石市','十堰市', '宜昌市', '襄樊市', '鄂州市', '荊門市', '孝感市', '荊州市', '黃岡市', '咸寧市', '隨州市', '恩施土家族苗族自治州','仙桃市', '潛江市', '天門市', '神農架林區'];
cityArr[17] = ['廣西壯族','南寧市','柳州市','桂林市','梧州市','北海市','防城港市','欽州市','貴港市','玉林市','百色市','賀州市','河池市','來賓市','崇左市'];
cityArr[18] = ['甘肅省','蘭州市','嘉峪關市', '金昌市', '白銀市', '天水市', '武威市', '張掖市', '平涼市', '酒泉市', '慶陽市', '定西市', '隴南市', '臨夏回族自治州', '甘南藏族自治州'];
cityArr[19] = ['山西省','太原市','大同市', '陽泉市', '長治市', '晉城市', '朔州市', '晉中市', '運城市', '忻州市', '臨汾市', '呂梁市' ];
cityArr[20] = ['內蒙古自治區','呼和浩特市', '包頭市', '烏海市', '赤峯市', '通遼市', '鄂爾多斯市', '呼倫貝爾市', '巴彥淖爾市', '烏蘭察布市', '興安盟', '錫林郭勒盟', '阿拉善盟' ];
cityArr[21] = ['陝西省','西安市','銅川市','寶雞市', '咸陽市', '渭南市', '延安市', '漢中市', '榆林市', '安康市', '商洛市' ];
cityArr[22] = ['吉林省','長春市', '吉林市', '四平市', '遼源市', '通化市', '白山市', '松原市', '白城市', '延邊朝鮮族自治州'];
cityArr[23] = ['福建省','福州市', '廈門市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龍巖市', '寧德市' ];
cityArr[24] = ['貴州省','貴陽市','六盤水市', '遵義市', '安順市', '銅仁地區', '黔西南布依族苗族自治州', '畢節地區', '黔東南苗族侗族自治州', '黔南布依族苗族自治州'];
cityArr[25] = ['廣東省','廣州市','韶關市','深圳市','珠海市','汕頭市','佛山市','江門市','湛江市','茂名市','肇慶市','惠州市','梅州市','汕尾市','河源市','陽江市','清遠市','東莞市','中山市','潮州市','揭陽市','雲浮市'];
cityArr[26] = ['青海省','西寧市' ,'海東地區', '海北藏族自治州', '黃南藏族自治州', '海南藏族自治州', '果洛藏族自治州', '玉樹藏族自治州', '海西蒙古族藏族自治州'];
cityArr[27] = ['西藏','拉薩市','昌都地區', '山南地區', '日喀則地市', '那曲地區', '阿里地區', '林芝地區' ];
cityArr[28] = ['四川省','成都市','自貢市', '攀枝花市', '瀘州市', '德陽市', '綿陽市', '廣元市', '遂寧市', '內江市', '樂山市', '南充市', '眉山市', '宜賓市', '廣安市', '達州市', '雅安市', '巴中市', '資陽市', '阿壩藏族羌族自治州', '甘孜藏族自治州', '涼山彝族自治州'];
cityArr[29] = ['寧夏回族','銀川市','石嘴山市','吳忠市','固原市','中衛市'];
cityArr[30] = ['海南省','海口市','三亞市','五指山市', '瓊海市', '儋州市', '文昌市', '萬寧市', '東方市', '定安縣', '屯昌縣', '澄邁縣', '臨高縣', '白沙黎族自治縣', '昌江黎族自治縣', '樂東黎族自治縣', '陵水黎族自治縣', '保亭黎族苗族自治縣', '瓊中黎族苗族自治縣' ];
cityArr[31] = ['臺灣省','臺北市', '高雄市', '基隆市', '臺中市', '臺南市', '新竹市', '嘉義市'];
cityArr[32] = ['香港特別行政區','中西區', '灣仔區', '東區', '南區', '油尖旺區', '深水埗區', '九龍城區', '黃大仙區', '觀塘區', '荃灣區', '葵青區', '沙田區', '西貢區', '大埔區', '北區', '元朗區', '屯門區', '離島區' ];
cityArr[33] = ['澳門特別行政區','澳門'];
//生成省份
for(var key in provinceArr) {
var provinceOption = document.createElement('option');
provinceOption.value = provinceOption.text = provinceArr[key];
province.options.add(provinceOption);
}
//生成市縣、區市'
//@current爲當前選擇的select節點，即父類節點
//@child爲子類點
//@childArr爲子節點數組
function showChild(current, child, childArr) {
var currentValue = current.value;
var count = childArr.length;
//每次切換市'把城市的子option長度設置市',即清除城市的選擇,DOM對象select元素是長度是子option的個市'
child.length = 1;
for(var i = 0; i < count; i++) {
//判斷所選的值即父類，與當前節點第一個數組元素是否相市'
if(currentValue == childArr[i][0]) {
//不取第一個數組元市'因爲第一個是父類，所以j市'開始，而不市'
for(var j = 1; j < childArr[i].length; j++) {
var childOption = document.createElement('option');
//ie不支持option對象的value,所以加childOption.text
childOption.value = childOption.text = childArr[i][j];
child.options.add(childOption);
}
}
}
}
//省份改變市'
province.onchange = function() {
showChild(province, city, cityArr);
}