效果圖如下：
思路很簡單，就是先加載省信息，然後當省改變的時候加載市縣信息。煩的是數據的錄入，代碼如下
<!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>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> <mce:script type="text/javascript"><!-- 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); } // --></mce:script> <div style="position: absolute; display: none; z-index: 9999;" mce_style="position: absolute; display: none; z-index: 9999;" id="livemargins_control"><img src="shenfen_files/monitor-background-horizontal.png" mce_src="shenfen_files/monitor-background-horizontal.png" style="position: absolute; left: -77px; top: -5px;" width="77" height="5"> <img src="shenfen_files/monitor-background-vertical.png" mce_src="shenfen_files/monitor-background-vertical.png" style="position: absolute; left: 0pt; top: -5px;"> <img id="monitor-play-button" src="shenfen_files/monitor-play-button.png" mce_src="shenfen_files/monitor-play-button.png" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.5" style="position: absolute; left: 1px; top: 0pt; opacity: 0.5; cursor: pointer;"></div></body></html>
