javascript支持区号输入的省市二级联动下拉菜单

更新时间：2007年05月07日 00:00:00 作者：

省市二级联动下拉菜单,增加了区号输入.多组选项共用一组数据.
选择地区,可以获取区号,填写区号自动选取地区.
某些地市的区号收集中.

<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需再刷新一下页面才能执行]

您可能感兴趣的文章:

javascript支持区号输入的省市二级联动下拉菜单

javascript实现倒计时（精确到秒）
本文给大家分享的是个人项目中使用的javascript实现的精确到秒级的倒计时代码，十分的实用，有需要的小伙伴可以参考下。
2015-06-06
javascript实现tab响应式切换特效
这篇文章主要为大家介绍了javascript实现tab响应式切换特效，以一个完整的实例对tab响应式切换特效进行详细的分析，感兴趣的小伙伴们可以参考一下
2016-01-01
JavaScript 事件记录使用说明
JavaScript 事件记录使用说明需要的朋友可以参考下。
2009-10-10
详解Javacript和AngularJS中的Promises
这篇文章主要介绍了详解Javacript和AngularJS中的Promises的相关资料,promise是Javascript异步编程很好的解决方案。，需要的朋友可以参考下
2016-02-02
两种简单的跨域方法(jsonp、php)
这篇文章主要为大家详细介绍了两种简单的跨域方法，使用jsonp和php实现跨域，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
微信小程序腾讯地图SDK 获取当前地址实现解析
这篇文章主要介绍了微信小程序腾讯地图SDK 获取当前地址实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08
document节点对象的获取方式示例介绍
如果要操作一个元素，首先要获取到它，下面为大家介绍下document节点对象的获取方式，感兴趣的朋友不要错过
2013-12-12
微信小程序异步API为Promise简化异步编程的操作方法
把微信小程序异步API转化为Promise。用Promise处理异步操作很方便。下面小编给大家带来了微信小程序异步API为Promise简化异步编程的操作方法，感兴趣的朋友一起看看吧
2018-08-08
JS使用cookie设置样式的方法
这篇文章主要介绍了JS使用cookie设置样式的方法,涉及javascript样式的设置与cookie的读写相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2016-06-06
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
下面小编就为大家带来一篇js es6系列教程 - 基于new.target属性与es5改造es6的类语法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09