html+js省市二級聯動（推薦）
阿新 • • 發佈：2019-01-25
1、html+js部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>二級聯動</title> </head> <body onload="init()"> <form method="post" action="{:url('Admin/Test/city')}"> 所在地區：<select name="province" id="param_province" onchange="provincechange(this.selectedIndex)"><option>請選擇省份</option></select> 城市：<select name="city" id="param_city"><option>請選擇城市</option></select><br><br> <input type="submit" value="立即提交"> </form> </body> </html> <script> var provinces = ['請選擇省份','北京市','上海市','天津市','重慶市','河北省','山西省','內蒙古省','遼寧省','吉林省','黑龍江省','江蘇省','浙江省','安徽省','福建省','江西省','山東省','河南省','湖北省','湖南省','廣東省','廣西省','海南省','四川省','貴州省','雲南省','西藏省','陝西省','甘肅省','寧夏省','青海省','新疆省','香港','澳門','臺灣']; var citys = [['請選擇城市'], ["東城區", "西城區", "崇文區", "宣武區", "朝陽區", "豐臺區", "石景山區", "海淀區", "門頭溝區", "房山區", "通州區", "順義區", "昌平區", "大興區", "懷柔區", "平谷區", "密雲縣", "延慶縣"], ["黃浦區", "盧灣區", "徐彙區", "長寧區", "靜安區", "普陀區", "虹口區", "楊浦區", "閔行區", "寶山區", "嘉定區", "浦東新區", "金山區", "松江區", "青浦區", "南匯區", "奉賢區", "崇明縣"], ["和平區", "河東區", "河西區", "南開區", "河北區", "紅橋區", "塘沽區", "漢沽區", "大港區", "東麗區", "西青區", "津南區", "北辰區", "武清區", "寶坻區", "寧河縣", "靜海縣", "薊縣"], ["萬州區", "涪陵區", "渝中區", "大渡口區", "江北區", "沙坪壩區", "九龍坡區", "南岸區", "北碚區", "萬盛區", "雙橋區", "渝北區", "巴南區", "黔江區", "長壽區", "綦江縣", "潼南縣", "銅梁縣", "大足縣", "榮昌縣", "璧山縣", "梁平縣", "城口縣", "豐都縣", "墊江縣", "武隆縣", "忠縣", "開縣", "雲陽縣", "奉節縣", "巫山縣", "巫溪縣", "石柱土家族自治縣", "秀山土家族苗族自治縣", "酉陽土家族苗族自治縣", "彭水苗族土家族自治縣", "江津市", "合川市", "永川市", "南川市"], ["石家莊市","張家口市","承德市","秦皇島市","唐山市","廊坊市","保定市","衡水市","滄州市","邢臺市","邯鄲市"], ["太原市","朔州市","大同市","陽泉市","長治市","晉城市","忻州市","晉中市","臨汾市","呂梁市","運城市"], ["呼和浩特市","包頭市","烏海市","赤峰市","通遼市","呼倫貝爾市","鄂爾多斯市","烏蘭察布市","巴彥淖爾市","興安盟","錫林郭勒盟","阿拉善盟"], ["瀋陽市","朝陽市","阜新市","鐵嶺市","撫順市","本溪市","遼陽市","鞍山市","丹東市","大連市","營口市","盤錦市","錦州市","葫蘆島市"], ["長春市","白城市","松原市","吉林市","四平市","遼源市","通化市","白山市","延邊州"], ["哈爾濱市","齊齊哈爾市","七臺河市","黑河市","大慶市","鶴崗市","伊春市","佳木斯市","雙鴨山市","雞西市","牡丹江市","綏化市","大興安嶺地區"], ["南京市","徐州市","連雲港市","宿遷市","淮安市","鹽城市","揚州市","泰州市","南通市","鎮江市","常州市","無錫市","蘇州市"], ["杭州市","湖州市","嘉興市","舟山市","寧波市","紹興市","衢州市","金華市","台州市","溫州市","麗水市"], ["合肥市","宿州市","淮北市","亳州市","阜陽市","蚌埠市","淮南市","滁州市","馬鞍山市","蕪湖市","銅陵市","安慶市","黃山市","六安市","巢湖市","池州市","宣城市"], ["福州市","南平市","莆田市","三明市","泉州市","廈門市","漳州市","龍巖市","寧德市"], ["南昌市","九江市","景德鎮市","鷹潭市","新餘市","萍鄉市","贛州市","上饒市","撫州市","宜春市","吉安市"], ["濟南市","青島市","聊城市","德州市","東營市","淄博市","濰坊市","煙臺市","威海市","日照市","臨沂市","棗莊市","濟寧市","泰安市","萊蕪市","濱州市","菏澤市"], ["鄭州市","開封市","三門峽市","洛陽市","焦作市","新鄉市","鶴壁市","安陽市","濮陽市","商丘市","許昌市","漯河市","平頂山市","南陽市","信陽市","周口市","駐馬店市","濟源市"], ["武漢市","十堰市","襄樊市","荊門市","孝感市","黃岡市","鄂州市","黃石市","咸寧市","荊州市","宜昌市","隨州市","省直轄縣級行政單位","恩施州"], ["長沙市","張家界市","常德市","益陽市","岳陽市","株洲市","湘潭市","衡陽市","郴州市","永州市","邵陽市","懷化市","婁底市","湘西州"], ["廣州市","深圳市","清遠市","韶關市","河源市","梅州市","潮州市","汕頭市","揭陽市","汕尾市","惠州市","東莞市","珠海市","中山市","江門市","佛山市","肇慶市","雲浮市","陽江市","茂名市","湛江市"], ["南寧市","桂林市","柳州市","梧州市","貴港市","玉林市","欽州市","北海市","防城港市","崇左市","百色市","河池市","來賓市","賀州市"], ["海口市","三亞市","省直轄縣級行政單位"], ["成都市","廣元市","綿陽市","德陽市","南充市","廣安市","遂寧市","內江市","樂山市","自貢市","瀘州市","宜賓市","攀枝花市","巴中市","達州市","資陽市","眉山市","雅安市","阿壩州","甘孜州","涼山州"], ["貴陽市","六盤水市","遵義市","安順市","畢節地區","銅仁地區","黔東南州","黔南州","黔西南州"], ["昆明市","曲靖市","玉溪市","保山市","昭通市","麗江市","思茅市","臨滄市","德巨集州","怒江州","迪慶州","大理州","楚雄州","紅河州","文山州","西雙版納州"], ["拉薩市","那曲地區","昌都地區","林芝地區","山南地區","日喀則地區","阿里地區"], ["西安市","延安市","銅川市","渭南市","咸陽市","寶雞市","漢中市","榆林市","安康市","商洛市"], ["蘭州市","嘉峪關市","白銀市","天水市","武威市","酒泉市","張掖市","慶陽市","平涼市","定西市","隴南市","臨夏州","甘南州"], ["西寧市","海東地區","海北州","海南州","黃南州","果洛州","玉樹州","海西州"], ["銀川市","石嘴山市","吳忠市","固原市","中衛市"], ["烏魯木齊市","克拉瑪依市","自治區直轄縣級行政單位","喀什地區","阿克蘇地區","和田地區","吐魯番地區","哈密地區","克孜勒蘇柯州","博爾塔拉州","昌吉州","巴音郭楞州","伊犁州","塔城地區","阿勒泰地區"], ["香港"], ["澳門"], ["臺北市","高雄市","臺中市","花蓮市","基隆市","嘉義市","金門市","連江市","苗栗市","南投市","澎湖市","屏東市","臺東市","臺南市","桃園市","新竹市","宜蘭市","雲林市","彰化市"]]; function init(){ var province = document.getElementById('param_province'); //給選擇框一個高度，可直接寫進資料，不然要先建立dom元素option再錄值 province.length=provinces.length; for(var i=0;i<provinces.length;i++){ province.options[i].text=provinces[i]; province.options[i].value=provinces[i]; } } function provincechange(n){ var city = document.getElementById('param_city'); var citystemp=citys[n]; city.length=citystemp.length; for(var i=0;i<citystemp.length;i++){ city.options[i].text=citystemp[i]; city.options[i].value=citystemp[i]; } city.options[0].selected=true; } </script>