javascript支持區(qū)號輸入的省市二級聯(lián)動下拉菜單

更新時間：2007年05月07日 00:00:00 作者：

省市二級聯(lián)動下拉菜單,增加了區(qū)號輸入.多組選項共用一組數(shù)據(jù).
選擇地區(qū),可以獲取區(qū)號,填寫區(qū)號自動選取地區(qū).
某些地市的區(qū)號收集中.

<span onclick="inti(0)"> <select name=azone id="azone" onChange="this.value=this.options[this.selectedIndex].value;altcls();inps.value=optn.options[0].value;"> <option value="省份" disabled="disabled">省份</option> </select> <select name=cls id="cls" onChange="if(this.options[0].text!='選擇城區(qū)')inps.value=this.options[this.selectedIndex].value;"> <option value=0>選擇城區(qū)</option> </select> <input type="text" id="inps" name="inps" size="5" value="" onkeyup="if(this.value.length>1)inti(0);findarea();"> </span>  <span onclick="inti(1)"> <select name=azone id="azone1" onChange="this.value=this.options[this.selectedIndex].value;altcls();inps.value=optn.options[0].value;"> <option value="省份" disabled="disabled">省份</option> </select> <select name=cls id="cls1" onChange="if(this.options[0].text!='選擇城區(qū)')inps.value=this.options[this.selectedIndex].value;"> <option value=0>選擇城區(qū)</option> </select> <input type="text" id="inps1" name="inps" size="5" value="" onkeyup="if(this.value.length>1)inti(1);findarea();"> </span> <script> var areaList={ "北京":[["選擇城區(qū)","10"],["東城區(qū)",""],["西城區(qū)",""],["崇文區(qū)",""],["宣武區(qū)",""],["朝陽區(qū)",""],["豐臺區(qū)",""],["石景山區(qū)",""],["海淀區(qū)",""],["門頭溝區(qū)",""],["房山區(qū)",""],["通州區(qū)",""],["順義區(qū)",""],["延慶縣",""],["昌平縣",""],["懷柔縣",""],["密云縣",""],["平谷縣",""],["大興縣",""]], "天津":[["選擇城區(qū)","22"],["和平區(qū)",""],["河東區(qū)",""],["河西區(qū)",""],["南開區(qū)",""],["河北區(qū)",""],["紅橋區(qū)",""],["塘沽區(qū)",""],["大港區(qū)",""],["漢沽區(qū)",""],["東麗區(qū)",""],["西青區(qū)",""],["津南區(qū)",""],["北辰區(qū)",""],["薊縣","22"],["寶坻縣",""],["武清縣",""],["寧河縣",""],["靜海縣",""]], "上海":[["選擇城區(qū)","21"],["南市區(qū)",""],["盧灣區(qū)",""],["徐匯區(qū)",""],["長寧區(qū)",""],["靜安區(qū)",""],["普陀區(qū)",""],["閘北區(qū)",""],["虹口區(qū)",""],["楊浦區(qū)",""],["閔行區(qū)",""],["寶山區(qū)",""],["嘉定區(qū)",""],["浦東新區(qū)",""],["金山區(qū)",""],["松江區(qū)",""],["崇明縣",""],["青浦縣",""],["南匯縣",""],["奉賢縣",""],["黃浦區(qū)",""]], "重慶":[["選擇城區(qū)","23"],["重慶市",""],["城口縣",""],["大足縣",""],["墊江縣",""],["豐都縣",""],["奉節(jié)縣",""],["河川市",""],["江津市",""],["開縣","23"],["梁平縣",""],["南川市",""],["彭水苗族土家族自治縣",""],["榮昌縣",""],["石柱土家族自治縣",""],["銅梁縣",""],["巫山縣",""],["巫溪縣",""],["武隆縣",""],["秀山土家苗族自治區(qū)",""],["永川市",""],["酉陽土家苗族自治區(qū)",""],["云陽縣",""],["忠縣","23"],["潼南縣",""],["碧山縣",""],["綦江縣",""]], "香港":[["選擇城區(qū)","0852"],["香港",""],["九龍",""],["新界",""],["大嶼",""]], "澳門":[["選擇城區(qū)","0853"],["澳門",""]], "西藏":[["阿里","8073"],["昌都","895"],["拉薩","891"],["林芝","894"],["那曲","896"],["日喀則","892"],["山南","893"]], "新疆":[["阿克蘇","997"],["阿拉爾","997"],["巴音郭楞蒙古自治州",""],["博爾塔拉蒙古自治州",""],["昌吉回族自治州",""],["哈密","902"],["和田","903"],["喀什",""],["克拉瑪依","990"],["克孜勒蘇柯爾克孜自治州",""],["石河子","993"],["圖木舒克",""],["吐魯番","995"],["烏魯木齊","991"],["奎屯","992"],["五家渠",""],["伊犁哈薩克自治州",""]], "內蒙古":[["阿拉善盟",""],["巴彥淖爾盟",""],["包頭","472"],["赤峰","476"],["呼和浩特","471"],["呼倫貝爾",""],["通遼","475"],["烏海","473"],["烏蘭察布盟",""],["錫林郭勒盟",""],["興安盟",""],["鄂爾多斯",""]], "廣西":[["百色","776"],["北海","779"],["崇左","771"],["防城港","770"],["桂林","773"],["貴港","775"],["河池","778"],["賀州",""],["來賓","772"],["柳州","772"],["南寧","771"],["欽州","777"],["梧州","774"],["玉林","775"]], "寧夏":[["固原","954"],["石嘴山","952"],["吳忠","953"],["銀川","951"]], "山西":[["長治","355"],["大同","352"],["晉城","356"],["晉中",""],["臨汾","357"],["呂梁",""],["朔州","349"],["太原","351"],["忻州","350"],["陽泉","353"],["運城","359"]], "河南":[["安陽","372"],["鶴壁","392"],["濟源","391"],["焦作","391"],["洛陽","379"],["南陽","377"],["開封","378"],["平頂山","375"],["三門峽","398"],["商丘","370"],["信陽","376"],["新鄉(xiāng)","373"],["許昌","374"],["鄭州","371"],["周口","394"],["駐馬店","396"],["漯河","395"],["濮陽","393"]], "河北":[["保定","312"],["滄州","317"],["邯鄲","310"],["承德","314"],["衡水","318"],["秦皇島","335"],["廊坊","316"],["石家莊","311"],["唐山","315"],["邢臺","319"],["張家口","313"]], "江西":[["撫州","794"],["贛江",""],["吉安","796"],["景德鎮(zhèn)","798"],["九江","792"],["南昌","791"],["上饒","793"],["萍鄉(xiāng)","799"],["新余","790"],["宜春","795"],["鷹潭","701"]], "湖南":[["常德",""],["長沙",""],["郴州",""],["衡陽",""],["懷化",""],["婁底",""],["邵陽",""],["湘潭",""],["湘西土家族苗族自治州",""],["益陽",""],["永州",""],["岳陽",""],["張家界",""],["株洲",""]], "江蘇":[["常州","519"],["連云港","518"],["淮安","517"],["南京","25"],["南通","513"],["蘇州","512"],["宿遷","527"],["泰州","523"],["無錫","510"],["徐州","516"],["鹽城","515"],["揚州","514"],["鎮(zhèn)江","511"]], "浙江":[["杭州","571"],["湖州","572"],["嘉興","573"],["金華","579"],["麗水","578"],["寧波","574"],["紹興","575"],["臺州","576"],["溫州","577"],["舟山","580"],["衢州","570"]], "安徽":[["安慶","556"],["蚌埠","552"],["巢湖","565"],["池州",""],["滁州","550"],["阜陽","558"],["合肥","551"],["淮北","561"],["淮南","554"],["黃山","559"],["六安","564"],["馬鞍山","555"],["宿州","557"],["銅陵","562"],["蕪湖","553"],["宣城",""],["亳州","558"]], "湖北":[["鄂州","711"],["恩施土家族苗族自治州",""],["黃岡","713"],["黃石","714"],["荊門","727"],["荊州",""],["神農架林區(qū)",""],["潛江","728"],["十堰","719"],["隨州","722"],["天門","728"],["武漢","27"],["咸寧","715"],["仙桃",""],["襄樊","710"],["孝感","712"],["宜昌","717"]], "黑龍江":[["大慶","459"],["大興安嶺",""],["哈爾濱","451"],["鶴崗","454"],["黑河","456"],["雞西","453"],["佳木斯","454"],["牡丹江","453"],["七臺河","453"],["齊齊哈爾","452"],["雙鴨山","454"],["綏化 ",""],["伊春","458"]], "吉林":[["白城","436"],["白山",""],["長春","431"],["吉林","431"],["遼源","437"],["四平","434"],["松原","438"],["通化","435"],["延邊朝鮮族自治州",""]], "遼寧":[["鞍山","555"],["本溪","414"],["朝陽","421"],["大連","456"],["丹東","415"],["撫順","413"],["阜新","418"],["葫蘆島","429"],["錦州","416"],["遼陽","419"],["盤錦","427"],["沈陽","24"],["鐵嶺","410"],["營口","417"]], "陜西":[["安康","915"],["寶雞","917"],["漢中","916"],["商洛",""],["銅川","919"],["西安","29"],["渭南","913"],["咸陽","910"],["延安","911"],["榆林","912"]], "甘肅":[["白銀","943"],["定西","932"],["甘南藏族自治區(qū)",""],["嘉峪關","937"],["金昌","935"],["酒泉","937"],["蘭州","931"],["臨夏回族自治區(qū)",""],["隴南",""],["平?jīng)?,"943"],["慶陽","9441"],["天水","938"],["武威",""],["張掖","936"]], "青海":[["果洛藏族自治州",""],["海北藏族自治州",""],["海東",""],["海南藏族自治州",""],["海西蒙古族藏族自治州",""],["黃南藏族自治州",""],["西寧","971"],["玉樹藏族自治州",""]], "云南":[["保山","875"],["楚雄彝族自治州",""],["大理白族自治州",""],["德宏傣族景頗族自治州",""],["迪慶藏族自治州",""],["紅河哈尼族彝族自治州",""],["昆明","871"],["麗江","888"],["臨滄","883"],["怒江傈僳族自治州",""],["曲靖","874"],["思茅","879"],["文山壯族苗族自治州",""],["西雙版納傣族自治州",""],["玉溪","877"],["昭通","870"]], "貴州":[["安順","853"],["畢節(jié)","857"],["貴陽","851"],["六盤水","858"],["黔東南苗族侗族自治州",""],["黔南布依族苗族自治州",""],["銅仁","856"],["遵義","852"],["黔西南布依族苗族自治州",""]], "四川":[["阿壩藏族羌族自治州",""],["巴中","8279"],["德陽","838"],["成都","28"],["達州",""],["甘孜藏族自治州",""],["廣安","826"],["廣元","839"],["樂山","833"],["涼山彝族自治州",""],["眉山","833"],["綿陽","816"],["南充","817"],["內江","832"],["攀枝花","812"],["遂寧","825"],["雅安","835"],["宜賓","831"],["資陽","832"],["自貢","813"],["瀘州","830"]], "福建":[["福州","591"],["龍巖","597"],["南平","599"],["寧德","593"],["莆田","594"],["泉州","595"],["三明","598"],["漳州","596"],["廈門","592"]], "山東":[["濱州","543"],["德州","534"],["東營","546"],["荷澤","530"],["濟南","531"],["濟寧","537"],["萊蕪","634"],["聊城","635"],["臨沂","539"],["青島","532"],["日照","633"],["泰安","538"],["威海","631"],["濰坊","536"],["煙臺","535"],["棗莊","632"],["淄博","533"]], "廣東":[["潮州","768"],["東莞","769"],["佛山","757"],["廣州","20"],["河源","762"],["江門","750"],["揭陽","663"],["惠州","752"],["茂名","668"],["梅州","753"],["清遠","763"],["汕頭","754"],["汕尾","660"],["韶關","751"],["深圳","755"],["陽江","662"],["云浮","766"],["湛江","759"],["肇慶","758"],["中山","760"],["珠海","756"]], "海南":[["白沙黎族自治縣",""],["保亭黎族苗族自治縣",""],["昌江黎族自治縣",""],["澄邁縣",""],["定安縣",""],["海口","898"],["東方","890"],["樂東黎族自治縣",""],["臨高縣",""],["陵水黎族自治縣",""],["瓊海","898"],["瓊中黎族苗族自治縣",""],["三亞","899"],["屯昌縣",""],["萬寧","898"],["文昌","898"],["五指山",""],["儋州","890"]], "臺灣":[["臺北市",""],["高雄市",""],["臺南市",""],["臺中市",""],["基隆",""],["新竹",""]], "海外華人":[["北美華人",""],["南美華人",""],["澳洲華人",""],["亞洲華人",""],["歐洲華人",""],["非洲華人",""]], "各國外賓":[["北美外賓",""],["南美外賓",""],["澳洲外賓",""],["亞洲外賓",""],["歐洲外賓",""],["非洲外賓",""]], "其它":[["其它","00"]] }; var sk=0; var fd=0; var skk; var ix=0; var sx=0;  var sf=document.getElementById("azone"); var optn=document.getElementById("cls"); var inps=document.getElementById('inps'); function inti(n){ sk=0; fd=0; if(n==0){ sf=document.getElementById("azone"); optn=document.getElementById("cls"); inps=document.getElementById('inps'); sx=12;ix=14; } if(n==1){ sf=document.getElementById("azone1"); optn=document.getElementById("cls1"); inps=document.getElementById('inps1'); sx=9;ix=4; } if(sf.options.length<2){for(name in areaList){ sf.options[sk++]=new Option(name,name); }} return true; } window.onload=function(){ for(nx=0;nx<2;nx++){ inti(nx); sf.selectedIndex=sx; sf.value=sf.options[sf.selectedIndex].value; altcls(); optn.selectedIndex=ix; optn.value=optn.options[optn.selectedIndex].value; inps.value=optn.options[optn.selectedIndex].value; } } function altcls(){ var tmpcls=areaList[sf.value]; var fs=0; optn.innerHTML=''; if(sf.value=="省份"){  optn.options[0]=new Option("←選左邊",0); }else{  try{if(tmpcls[0][0].indexOf("選擇城區(qū)")!=-1)fs++;}catch(e){}  optn.options[0]=new Option("選取地區(qū)",0);  optn.options[0].disabled="disabled";optn.options[0].style.color="#060";  for(i=0;i<tmpcls.length;i++){   if(typeof(tmpcls[i][0])!="undefined"&&tmpcls[i][0].length>1){     optn.options[i]=new Option(tmpcls[i][0],"0"+tmpcls[i][1]);     if("0"+tmpcls[i][1]==inps.value){       optn.selectedIndex=i;fd=1;if((++fs)==2){optn.selectedIndex=0;fs=1;}}   }else{optn.options[i]=new Option(tmpcls[i],tmpcls[i]); }  } } return; } function findarea(){ sk=0; if(inps.value.substring(0,1)>0)inps.value="0"+inps.value; for(name in areaList){ sf.options[sk++]=new Option(name,name); sf.value=sf.options[sk-1].value; altcls(); if(fd==1){fd=0;sf.selectedIndex=sk-1;break;} } } </script>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

javascript支持區(qū)號輸入的省市二級聯(lián)動下拉菜單

javascript比較語義化版本號的實現(xiàn)代碼
這篇文章先是給大家簡單的介紹了下語義化版本號，而后再用實例代碼演示語義化版本號的比較方法，有需要的朋友們可以參考借鑒。
2016-09-09
從柯里化分析JavaScript重要的高階函數(shù)實例
這篇文章主要為大家介紹了從柯里化分析JavaScript重要的高階函數(shù)實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-10-10
JavaScript中DOM操作常用事件總結
這篇文章主要為大家詳細介紹了JavaScript中常用的幾個DOM事件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-04-04
修改發(fā)貼的編輯功能
修改發(fā)貼的編輯功能...
2007-03-03
微信小程序HTTP請求從0到1封裝
這篇文章主要給大家介紹了關于微信小程序HTTP請求從0到1封裝的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用微信小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-09-09
Web跨瀏覽器進程通信(Web跨域)
Web跨域已是老生常談的話題，這次來嘗試下跨域瀏覽器進程之間的通信 —— 這在過去基本依靠網(wǎng)絡中轉實現(xiàn)
2013-04-04
JS 進度條效果實現(xiàn)代碼整理
進度條效果實現(xiàn)代碼,有助于緩解頁面顯示慢的頁面，給用戶一個等待時間的效果
2011-05-05
JavaScript中遞歸實現(xiàn)的方法及其區(qū)別
遞歸函數(shù)是在通過名字調用自身的情況下構成的。下面通過本文給大家分享JavaScript中遞歸實現(xiàn)的方法及其區(qū)別，感興趣的朋友一起看看吧
2017-09-09
js 文本滾動效果的實例代碼
一個簡單的滾動效果，我只測試了文本，對于圖片有需要的朋友可以測試一下哦
2013-08-08
javascript?實現(xiàn)純前端將數(shù)據(jù)導出excel兩種方式
這篇文章主要介紹了javascript?實現(xiàn)純前端將數(shù)據(jù)導出excel兩種方式，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參一下
2022-07-07