js代碼:

View Code var china = [//直轄市['北京市'],['上海市'],['天津市'],['重慶市'],//華北地區['河北省','石家莊','唐山','秦皇島','邯鄲','邢臺','保定','張家口','承德','滄州','廊坊','衡水'],['山西省','太原','大同','陽泉','長治','晉城','朔州','晉中','運城','忻州','臨汾','呂梁'],['內蒙古自治區','呼和浩特','包頭','烏海','赤峰','通遼','鄂爾多斯','呼倫貝爾','巴彥淖爾','烏蘭察布','興安','錫林郭勒','阿拉善'],//東北地區['遼寧省','沈陽','大連','鞍山','撫順','本溪','丹東','錦州','營口','阜新','遼陽','盤錦','鐵嶺','朝陽','葫蘆島'],['吉林省','長春','吉林','四平','遼源','通化','白山','松原','白城','延邊'],['黑龍江','哈爾濱','齊齊哈爾','雞西','鶴崗','雙鴨山','大慶','伊春','佳木斯','七臺河','牡丹江','黑河','綏化','大興安嶺'],//華東地區['江蘇省','南京','無錫','徐州','常州','蘇州','南通','連云港','淮安','鹽城','揚州','鎮江','泰州','宿遷'],['浙江省','杭州','寧波','溫州','嘉興','湖州','紹興','金華','衢州','舟山','臺州','麗水'],['安徽省','合肥','蕪湖','蚌埠','淮南','馬鞍山','淮北','銅陵','安慶','黃山','滁州','阜陽','宿州','巢湖','六安','亳州','池州','宣城'],['福建省','福州','廈門','莆田','三明','泉州','漳州','南平','龍巖','寧德'],['江西省','南昌','景德鎮','萍鄉','九江','新余','鷹潭','贛州','吉安','宜春','撫州','上饒'],['山東省','濟南','青島','淄博','棗莊','東營','煙臺','濰坊','威海','濟寧','泰安','日照','萊蕪','臨沂','德州','聊城','濱州','菏澤'],//中南地區['河南省','鄭州','開封','洛陽','平頂山','焦作','鶴壁','新鄉','安陽','濮陽','許昌','漯河','三門峽','南陽','商丘','信陽','周口','駐馬店'],['湖北省','武漢','黃石','襄樊','十堰','荊州','宜昌','荊門','鄂州','孝感','咸寧','隨州','恩施'],['湖南省','長沙','株洲','湘潭','衡陽','邵陽','岳陽','常德','張家界','益陽','郴州','永州','懷化','婁底','湘西'],['廣東省','廣州','深圳','珠海','汕頭','韶關','佛山','江門','湛江','茂名','肇慶','惠州','梅州','汕尾','河源','陽江','清遠','東莞','中山','潮州','揭陽','云浮'],['廣西自治區','南寧','柳州','桂林','梧州','北海','防城港','欽州','貴港','玉林','百色','賀州','河池','來賓','崇左'],['海南省','海口','三亞'],//西南地區['四川省','成都','自貢','攀枝花','瀘州','德陽','綿陽','廣元','遂寧','內江','樂山','南充','宜賓','廣安','達州','眉山','雅安','巴中','資陽',"阿壩","甘孜","涼山"],['貴州省','貴陽',"六盤水","遵義","安順","銅仁","畢節","黔西南","黔東南","黔南"],['云南省','昆明','曲靖','玉溪',"保山","昭通","麗江","普洱","臨滄","文山","紅河","西雙版納","楚雄","大理","德宏","怒江","迪慶"],['西藏自治區',"拉薩","昌都","山南","日喀則","那曲","阿里","林芝"],//西北地區['陜西省','西安','銅川','寶雞','咸陽','渭南','延安','漢中','榆林','安康','商洛'],['甘肅省',"蘭州","嘉峪關","金昌","白銀","天水","武威","張掖","平涼","酒泉","慶陽","定西","隴南","臨夏","甘南"],['青海省',"西寧","海東","海北","黃南","海南","果洛","玉樹","海西"],['寧夏自治區','銀川',"石嘴山","吳忠","固原","中衛"],['新疆自治區','烏魯木齊',"克拉瑪依","吐魯番","哈密","和田","阿克蘇","喀什","克孜勒蘇柯爾克孜","巴音郭楞蒙古","昌吉","博爾塔拉蒙古","伊犁哈薩克","塔城","阿勒泰"],//港澳臺['香港特別行政區'],['澳門特別行政區'],['臺灣省',"臺北","高雄","基隆","臺中","臺南","新竹","嘉義"]];function BindProvince(){var opt0 = "省份";var ProvinceCount=china.length;var ddlProvince = document.getElementById("ddlProvince");ddlProvince.innerHTML = "";ddlProvince.options[0] = new Option(opt0,"");for(var i=0; i<ProvinceCount; i++){ddlProvince.options[i+1] = new Option(china[i][0],china[i][0]);}}function BindCity(City){var opt0 = "省份";var ProvinceCount=china.length;var ddlProvince = document.getElementById("ddlProvince");ddlProvince.innerHTML = "";ddlProvince.options[0] = new Option(opt0,"");var opt0City = "城市";var ddlCity = document.getElementById("ddlCity");ddlCity.innerHTML = "";ddlCity.options[0] = new Option(opt0City,"");var flag=false;var chose=true;var selectProvinceIndex=0;for(var i=0; i<ProvinceCount; i++){if(!flag){var cityCount = china[i].length;for(var j=1; j<cityCount; j++){if(china[i][j]==City){flag=true;selectProvinceIndex=i;break;}}}ddlProvince.options[i+1] = new Option(china[i][0],china[i][0]);if(flag && chose){ddlProvince.options[i+1].selected = true;chose=false;}}var cityCount = china[selectProvinceIndex].length;for(var i=0; i<cityCount; i++){if(cityCount == 1 && i == 0){ddlCity.options[i+1] = new Option(china[selectProvinceIndex][i],china[selectProvinceIndex][i]);i = 1;}else if(cityCount > 1 && i == 0){i = 1;ddlCity.options[i] = new Option(china[selectProvinceIndex][i],china[selectProvinceIndex][i]);}else{ddlCity.options[i] = new Option(china[selectProvinceIndex][i],china[selectProvinceIndex][i]);}if(china[selectProvinceIndex][i]==City){ddlCity.options[i].selected=true;}}}function selectMoreCity(sbj){var opt0 = "城市";if(sbj.selectedIndex==0){var ddlCity = document.getElementById("ddlCity");ddlCity.innerHTML = "";ddlCity.options[0] = new Option(opt0,"");return;}var selectProvince = sbj.options[sbj.selectedIndex].value;var ProvinceCount = china.length;for(var i=0; i<ProvinceCount; i++){if(china[i][0] == selectProvince){var cityCount = china[i].length;var ddlCity = document.getElementById("ddlCity");ddlCity.innerHTML = "";ddlCity.options[0] = new Option(opt0,"");for(var j=0; j<cityCount; j++){if(cityCount == 1 && j == 0){ddlCity.options[j+1] = new Option(china[i][j],china[i][j]);j = 1;}else if(cityCount > 1 && j == 0){j = 1;ddlCity.options[j] = new Option(china[i][j],china[i][j]);}else{ddlCity.options[j] = new Option(china[i][j],china[i][j]);}if(j == 1){ddlCity.options[1].selected = true;}}break;}}}

html代碼:

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>省份城市選擇 </title> </head> <body> <script type="text/javascript" src="morecity.js" mce_src="morecity.js"></script> <FORM class="city_title" onsubmit="manSub(this);return false;" name="spc"> 按省份選擇： <select name="ddlProvince" id="ddlProvince" onchange="selectMoreCity(this)"></select><select name="ddlCity" id="ddlCity"><option selected value="">城市</option></select><INPUT value="確定" type="submit" name="提交"> </FORM> <script type="text/javascript" language ="javascript"><!--//BindProvince();//只初始化省份 BindCity("洛陽");//初始化，并選中洛陽市和洛陽市所在的省 // --></script></body> </html>

總結

以上是生活随笔為你收集整理的完整国内城市js级联选择的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。