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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript支持区号输入的省市二级联动下拉菜单

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 214 ::

收藏到网摘: n/a

ESC之ESC.wsf可以实现javascript的代码压缩附使用方法一个不错的渐显菜单

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

点击运行可以看到效果:

<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 全选提示:你可先修改部分代码,再按运行]

ESC之ESC.wsf可以实现javascript的代码压缩附使用方法一个不错的渐显菜单

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

评论 (0) All