javascript支持區號輸入的省市二級聯動下拉菜單

2019-11-21 02:06:16

字體：大中小

來源：轉載

供稿：網友

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

<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!='選擇城區')inps.value=this.options[this.selectedIndex].value;"> <option value=0>選擇城區</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!='選擇城區')inps.value=this.options[this.selectedIndex].value;"> <option value=0>選擇城區</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={ "北京":[["選擇城區","10"],["東城區",""],["西城區",""],["崇文區",""],["宣武區",""],["朝陽區",""],["豐臺區",""],["石景山區",""],["海淀區",""],["門頭溝區",""],["房山區",""],["通州區",""],["順義區",""],["延慶縣",""],["昌平縣",""],["懷柔縣",""],["密云縣",""],["平谷縣",""],["大興縣",""]], "天津":[["選擇城區","22"],["和平區",""],["河東區",""],["河西區",""],["南開區",""],["河北區",""],["紅橋區",""],["塘沽區",""],["大港區",""],["漢沽區",""],["東麗區",""],["西青區",""],["津南區",""],["北辰區",""],["薊縣","22"],["寶坻縣",""],["武清縣",""],["寧河縣",""],["靜海縣",""]], "上海":[["選擇城區","21"],["南市區",""],["盧灣區",""],["徐匯區",""],["長寧區",""],["靜安區",""],["普陀區",""],["閘北區",""],["虹口區",""],["楊浦區",""],["閔行區",""],["寶山區",""],["嘉定區",""],["浦東新區",""],["金山區",""],["松江區",""],["崇明縣",""],["青浦縣",""],["南匯縣",""],["奉賢縣",""],["黃浦區",""]], "重慶":[["選擇城區","23"],["重慶市",""],["城口縣",""],["大足縣",""],["墊江縣",""],["豐都縣",""],["奉節縣",""],["河川市",""],["江津市",""],["開縣","23"],["梁平縣",""],["南川市",""],["彭水苗族土家族自治縣",""],["榮昌縣",""],["石柱土家族自治縣",""],["銅梁縣",""],["巫山縣",""],["巫溪縣",""],["武隆縣",""],["秀山土家苗族自治區",""],["永川市",""],["酉陽土家苗族自治區",""],["云陽縣",""],["忠縣","23"],["潼南縣",""],["碧山縣",""],["綦江縣",""]], "香港":[["選擇城區","0852"],["香港",""],["九龍",""],["新界",""],["大嶼",""]], "澳門":[["選擇城區","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"],["新鄉","373"],["許昌","374"],["鄭州","371"],["周口","394"],["駐馬店","396"],["漯河","395"],["濮陽","393"]], "河北":[["保定","312"],["滄州","317"],["邯鄲","310"],["承德","314"],["衡水","318"],["秦皇島","335"],["廊坊","316"],["石家莊","311"],["唐山","315"],["邢臺","319"],["張家口","313"]], "江西":[["撫州","794"],["贛江",""],["吉安","796"],["景德鎮","798"],["九江","792"],["南昌","791"],["上饒","793"],["萍鄉","799"],["新余","790"],["宜春","795"],["鷹潭","701"]], "湖南":[["常德",""],["長沙",""],["郴州",""],["衡陽",""],["懷化",""],["婁底",""],["邵陽",""],["湘潭",""],["湘西土家族苗族自治州",""],["益陽",""],["永州",""],["岳陽",""],["張家界",""],["株洲",""]], "江蘇":[["常州","519"],["連云港","518"],["淮安","517"],["南京","25"],["南通","513"],["蘇州","512"],["宿遷","527"],["泰州","523"],["無錫","510"],["徐州","516"],["鹽城","515"],["揚州","514"],["鎮江","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"],["荊州",""],["神農架林區",""],["潛江","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"],["甘南藏族自治區",""],["嘉峪關","937"],["金昌","935"],["酒泉","937"],["蘭州","931"],["臨夏回族自治區",""],["隴南",""],["平涼","943"],["慶陽","9441"],["天水","938"],["武威",""],["張掖","936"]], "青海":[["果洛藏族自治州",""],["海北藏族自治州",""],["海東",""],["海南藏族自治州",""],["海西蒙古族藏族自治州",""],["黃南藏族自治州",""],["西寧","971"],["玉樹藏族自治州",""]], "云南":[["保山","875"],["楚雄彝族自治州",""],["大理白族自治州",""],["德宏傣族景頗族自治州",""],["迪慶藏族自治州",""],["紅河哈尼族彝族自治州",""],["昆明","871"],["麗江","888"],["臨滄","883"],["怒江傈僳族自治州",""],["曲靖","874"],["思茅","879"],["文山壯族苗族自治州",""],["西雙版納傣族自治州",""],["玉溪","877"],["昭通","870"]], "貴州":[["安順","853"],["畢節","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("選擇城區")!=-1)fs++;}catch(e){}  optn.options[0]=new Option("選取地區",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需刷新才能執行]

上一篇：一個不錯的漸顯菜單

下一篇：ESC之ESC.wsf可以實現javascript的代碼壓縮附使用方法第1/5頁