js代碼:

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。