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

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

省份

选择城区

1)inti(0);findarea();">

省份

选择城区

1)inti(1);findarea();">

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.length1){
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;}
}
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动

    利用struts2和Ajax实现json对象的传输,然后实现菜单的二级联动 下面是我的 js文件原码: 复制代码 代码如下: var mail={ //初始化 init:{ //初始化数据 initdata:{ did:'', ttitle:'', sendpassword:'', description:'' }, //初始化事件 initevent:{ DataEvent:function(){ $("#did").unbind("change");//获取一级

  • JS简单实现城市二级联动选择插件的方法

    本文实例讲述了JS简单实现城市二级联动选择插件的方法.分享给大家供大家参考.具体如下: js实现的城市联动选择菜单,网上经常见到,不多介绍了,本款城市选择菜单原型基于Select,主要使用JavaScript来实现,运用了数组和循环等基础技巧制作完成的.本效果只是为了演示如何实现,里面的数据不全,需要的自己可以添加. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ejld-city-cha-plug-codes/ 具体代码如下: <htm

  • 基于Javascript实现二级联动菜单效果

    本文实例为大家分享了Javascript实现二级联动菜单效果的对应代码,具体内容如下 效果图如下: 具体实现步骤如下: 1.所用js代码如下: <script type="text/javascript"> var arr_province=["请选择省份/城市","北京市","上海市","天津市","河南省","山东省","河北省"]

  • js操作二级联动实现代码

    表结构 二级或多级联动主要是以数据库中具有父编号的表为基础,这个也不例外 id,parent_id,name 三列. 采用js操作 先说下数据在js中的存储方式. 主要用二维数组来存储数据.结构如下: a[父编号]=[[子编号1,子名称1],[子编号2,子名称2],[子编号3,子名称3],--]; 首先用父编号获取所有的子数据,在把子数据的编号及名称绑定在dropdown中 第一步 二级联动数据(后面说这些数据怎么得到) 复制代码 代码如下: var cities=new Array(); ci

  • 原生js二级联动效果

    今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果. //创建两个下拉列表 select标签 是下拉列表 var sel = document.createElement("select"); var sel1 = document.createElement("select"); //添加到body document.body.appendChild(sel); document.body.appendChild(sel1); // 创建一个

  • 最好用的省市二级联动 原生js实现你值得拥有

    复制代码 代码如下: <script language=javascript> cities = new Object(); cities['台湾']=new Array('台北','台南','其他'); cities['马来西亚']=new Array('Malaysia'); cities['北京']=new Array('北京'); cities['上海']=new Array('上海'); cities['天津']=new Array('天津'); cities['重庆']=new A

  • jsp从数据库获取数据填充下拉框实现二级联动菜单的方法

    本文实例讲述了jsp从数据库获取数据填充下拉框实现二级联动菜单的方法.分享给大家供大家参考,具体如下: 项目告一段落,现在将遇到的比较实用的东西记录下来,写了多遍了,谨记于此,以备查看! 1.首先在数据库中获取第一个下拉框的数据: <s:select listKey="tsFrom" id="t_tsfrom" cssClass="required" listValue="tsFrom" cssStyle="w

  • 全国省市二级联动下拉菜单 js版

    本文实例为大家分享了js实现二级联动下拉菜单的具体代码,供大家参考,具体内容如下 js代码部分: /* * 全国二级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,iArray){ this.Items[id] = iArray; } Dsy.prototype.Exists = function(id){ if(typeof(this.Items[id]) == "undefined&

  • js实现的全国省市二级联动下拉选择菜单完整实例

    本文实例讲述了js实现的全国省市二级联动下拉选择菜单.分享给大家供大家参考.具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-province-city-cho-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

  • 简单js代码实现selece二级联动(推荐)

    以下是html代码: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD>  <TITLE> New Document </TITLE>  <META NAME="Generator" CONTENT="EditPlus">  <META NAME=&

随机推荐