JS实现的省份级联实例代码


Posted in Javascript onJune 24, 2013

这是从本人以前博客带过来的,感觉这个还蛮实用,代码分享下:

province.html:

<html> 
    <head> 
    <title>省份与省市级联</title> 
    </head> 
<script language="javascript" src="province.js" type="text/javascript" charset="gb2312"></script> </script> 
<body onload='getProvince()'> 
<div id='province'><select><option>省份</option></select></div> 
<div id='city'><select><option>城市</option></select></div> 
</boydy> 
</html>

province.js:
var sity;city=new Array(34);city[0]=new Array(19); 
city[0][0]="北京";city[0][1]="东城";city[0][2]="西城";city[0][3]="宣武";city[0][4]="朝阳";city[0][5]="崇文";city[0][6]="海淀";city[0][7]="丰台";city[0][8]="石景山";city[0][9]="通州";city[0][10]="平谷";city[0][11]="顺义";city[0][12]="怀柔";city[0][13]="密云";city[0][14]="延庆";city[0][15]="昌平";city[0][16]="门头沟";city[0][17]="房山";city[0][18]="大兴";city[1]=new Array(12);city[1][0]="上海";city[1][1]="近郊";city[1][2]="闵行";city[1][3]="浦东";city[1][4]="南汇";city[1][5]="奉贤";city[1][6]="金山";city[1][7]="松江";city[1][8]="青浦";city[1][9]="嘉定";city[1][10]="宝山";city[1][11]="崇明";city[2]=new Array(8);city[2][0]="天津";city[2][1]="塘沽";city[2][2]="汉沽";city[2][3]="宁河";city[2][4]="静海";city[2][5]="武清";city[2][6]="宝坻";city[2][7]="蓟县";city[3]=new Array(1);city[3][0]="重庆";city[4]=new Array(14);city[4][0]="内蒙古";city[4][1]="呼和浩特";city[4][2]="集宁";city[4][3]="包头";city[4][4]="临河";city[4][5]="乌海";city[4][6]="东胜";city[4][7]="海拉尔";city[4][8]="赤峰";city[4][9]="锡林浩特";city[4][10]="太仆寺旗";city[4][11]="通辽";city[4][12]="阿拉善盟";city[4][13]="白城";city[5]=new Array(12);city[5][0]="河北";city[5][1]="石家庄";city[5][2]="衡水";city[5][3]="邢台";city[5][4]="邯郸";city[5][5]="沧州";city[5][6]="唐山";city[5][7]="廊坊";city[5][8]="秦皇岛";city[5][9]="承德";city[5][10]="保定";city[5][11]="张家口";city[6]=new Array(13);city[6][0]="辽宁";city[6][1]="沈阳";city[6][2]="铁岭";city[6][3]="抚顺";city[6][4]="鞍山";city[6][5]="营口";city[6][6]="大连";city[6][7]="本溪";city[6][8]="丹东";city[6][9]="锦州";city[6][10]="朝阳";city[6][11]="阜新";city[6][12]="盘锦";city[7]=new Array(9);city[7][0]="吉林";city[7][1]="长春";city[7][2]="吉林";city[7][3]="延吉";city[7][4]="通化";city[7][5]="梅河口";city[7][6]="四平";city[7][7]="白城";city[7][8]="松原";city[8]=new Array(9);city[8][0]="黑龙江";city[8][1]="哈尔滨";city[8][2]="绥化";city[8][3]="佳木斯";city[8][4]="牡丹江";city[8][5]="齐齐哈尔";city[8][6]="大庆";city[8][7]="北安";city[8][8]="大兴安岭";city[9]=new Array(12);city[9][0]="江苏";city[9][1]="南京";city[9][2]="镇江";city[9][3]="常州";city[9][4]="无锡";city[9][5]="苏州";city[9][6]="徐州";city[9][7]="连云港";city[9][8]="淮阴";city[9][9]="盐城";city[9][10]="扬州";city[9][11]="南通";city[10]=new Array(12);city[10][0]="安徽";city[10][1]="合肥";city[10][2]="淮南";city[10][3]="蚌埠";city[10][4]="宿州";city[10][5]="阜阳";city[10][6]="六安";city[10][7]="巢湖";city[10][8]="滁州";city[10][9]="芜湖";city[10][10]="屯溪";city[10][11]="安庆";city[11]=new Array(14);city[11][0]="山东";city[11][1]="济南";city[11][2]="聊城";city[11][3]="德州";city[11][4]="淄博";city[11][5]="东营";city[11][6]="潍坊";city[11][7]="烟台";city[11][8]="青岛";city[11][9]="泰安";city[11][10]="济宁";city[11][11]="荷泽";city[11][12]="临沂";city[11][13]="枣庄";city[12]=new Array(12);city[12][0]="浙江";city[12][1]="杭州";city[12][2]="绍兴";city[12][3]="湖州";city[12][4]="嘉兴";city[12][5]="宁波";city[12][6]="舟山";city[12][7]="台州";city[12][8]="金华";city[12][9]="丽水";city[12][10]="衢州";city[12][11]="温州";city[13]=new Array(11);city[13][0]="江西";city[13][1]="南昌";city[13][2]="九江";city[13][3]="景德镇";city[13][4]="上饶";city[13][5]="鹰潭";city[13][6]="宜春";city[13][7]="萍乡";city[13][8]="赣州";city[13][9]="吉安";city[13][10]="抚州";city[14]=new Array(10);city[14][0]="福建";city[14][1]="福州";city[14][2]="南平";city[14][3]="邵武";city[14][4]="福安";city[14][5]="厦门";city[14][6]="泉州";city[14][7]="漳州";city[14][8]="龙岩";city[14][9]="三明";city[15]=new Array(14);city[15][0]="湖南";city[15][1]="长沙";city[15][2]="株洲";city[15][3]="益阳";city[15][4]="岳阳";city[15][5]="常德";city[15][6]="吉首";city[15][7]="娄底";city[15][8]="怀化";city[15][9]="衡阳";city[15][10]="邵阳";city[15][11]="郴州";city[15][12]="零陵";city[15][13]="张家界";city[16]=new Array(10);city[16][0]="湖北";city[16][1]="武汉";city[16][2]="沙市";city[16][3]="黄石";city[16][4]="鄂州";city[16][5]="咸宁";city[16][6]="襄樊";city[16][7]="十堰";city[16][8]="宜昌";city[16][9]="恩施";city[17]=new Array(15);city[17][0]="河南";city[17][1]="郑州";city[17][2]="新乡";city[17][3]="安阳";city[17][4]="许昌";city[17][5]="漯河";city[17][6]="驻马店";city[17][7]="信阳";city[17][8]="周口";city[17][9]="平顶山";city[17][10]="洛阳";city[17][11]="三门峡";city[17][12]="南阳";city[17][13]="开封";city[17][14]="商丘";city[18]=new Array(12);city[18][0]="广东";city[18][1]="广州";city[18][2]="韶关";city[18][3]="英德";city[18][4]="梅州";city[18][5]="汕头";city[18][6]="惠州";city[18][7]="深圳";city[18][8]="湛江";city[18][9]="茂名";city[18][10]="肇庆";city[18][11]="佛山";city[19]=new Array(9);city[19][0]="广西";city[19][1]="南宁";city[19][2]="百色";city[19][3]="钦州";city[19][4]="玉林";city[19][5]="桂林";city[19][6]="梧州";city[19][7]="柳州";city[19][8]="河池";city[20]=new Array(8);city[20][0]="贵州";city[20][1]="贵阳";city[20][2]="六盘水";city[20][3]="玉屏";city[20][4]="凯里";city[20][5]="都匀";city[20][6]="安顺";city[20][7]="遵义";city[21]=new Array(16);city[21][0]="四川";city[21][1]="成都";city[21][2]="乐山";city[21][3]="凉山";city[21][4]="渡口";city[21][5]="绵阳";city[21][6]="汶川";city[21][7]="雅安";city[21][8]="甘孜";city[21][9]="广元";city[21][10]="南充";city[21][11]="达州";city[21][12]="内江";city[21][13]="自贡";city[21][14]="宜宾";city[21][15]="泸州";city[22]=new Array(13);city[22][0]="云南";city[22][1]="昆明";city[22][2]="曲靖";city[22][3]="昭通";city[22][4]="开远";city[22][5]="文山";city[22][6]="思茅";city[22][7]="大理";city[22][8]="楚雄";city[22][9]="临沧";city[22][10]="保山";city[22][11]="六盘水";city[22][12]="渡口";city[23]=new Array(11);city[23][0]="陕西";city[23][1]="西安";city[23][2]="渭南";city[23][3]="延安";city[23][4]="绥德";city[23][5]="榆林";city[23][6]="宝鸡";city[23][7]="汉中";city[23][8]="安康";city[23][9]="商洛";city[23][10]="铜川";city[24]=new Array(13);city[24][0]="甘肃";city[24][1]="兰州";city[24][2]="武威";city[24][3]="张掖";city[24][4]="酒泉";city[24][5]="安西";city[24][6]="金昌";city[24][7]="天水";city[24][8]="定西";city[24][9]="平凉";city[24][10]="西峰";city[24][11]="陇西";city[24][12]="甘南";city[25]=new Array(5);city[25][0]="宁夏";city[25][1]="银川";city[25][2]="吴忠";city[25][3]="石咀山";city[25][4]="固原";city[26]=new Array(7);city[26][0]="青海";city[26][1]="西宁";city[26][2]="果洛";city[26][3]="玉树";city[26][4]="格尔木";city[26][5]="海西";city[26][6]="阿坝";city[27]=new Array(11);city[27][0]="新疆";city[27][1]="乌鲁木齐";city[27][2]="石河子";city[27][3]="乌苏";city[27][4]="克拉玛依";city[27][5]="伊宁";city[27][6]="吐鲁番";city[27][7]="哈密";city[27][8]="巴音郭楞";city[27][9]="阿克苏";city[27][10]="喀什";city[28]=new Array(8);city[28][0]="西藏";city[28][1]="拉萨";city[28][2]="那曲";city[28][3]="昌都";city[28][4]="山南";city[28][5]="日喀则";city[28][6]="阿里";city[28][7]="林芝";city[29]=new Array(4);city[29][0]="海南";city[29][1]="海口";city[29][2]="三亚";city[29][3]="海南";city[30]=new Array(12);city[30][0]="山西";city[30][1]="太原";city[30][2]="离石";city[30][3]="忻州";city[30][4]="宁武";city[30][5]="大同";city[30][6]="临汾";city[30][7]="侯马";city[30][8]="运城";city[30][9]="阳泉";city[30][10]="长治";city[30][11]="晋城";city[31]=new Array(17);city[31][0]="台湾";city[31][1]="台北";city[31][2]="台中";city[31][3]="基隆";city[31][4]="台南";city[31][5]="嘉义";city[31][6]="桃园";city[31][7]="苗粟";city[31][8]="屏东";city[31][9]="南投";city[31][10]="花莲";city[31][11]="新竹";city[31][12]="彰化";city[31][13]="高雄";city[31][14]="宜兰";city[31][15]="台东";city[31][16]="彭湖";city[32]=new Array(1);city[32][0]="香港";city[33]=new Array(1);city[33][0]="澳门"; 
    function getRegion() 
    {          
        document.getElementById("city").innerHTML=""; 
        var provinces=document.getElementById("provinces"); 
        var prov=provinces[provinces.selectedIndex].value; 
        var str="<select>"; 
            for(var i=0;i<city[prov].length;i++) 
            {         
                str=str+"<option>"+city[prov][i]+"</option>";     
            } 
            str=str+"</select>"; 
    document.getElementById("city").innerHTML=str; 
    } 
    function getProvince() 
    {    var strs="<select onchange='getRegion()' id='provinces'><option></option>"; 
        for(var i=0;i<=33;i++) 
        { 
            strs=strs+"<option value="+i+">"+city[i][0]+"</option>"; 
        }     
        strs=strs+"</select>"; 
        document.getElementById('province').innerHTML=strs; 
    }
Javascript 相关文章推荐
javascript中xml操作实现代码
Nov 21 Javascript
JS对象与JSON格式数据相互转换
Feb 20 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
Jun 26 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 #Javascript
用jquery生成二级菜单的实例代码
Jun 24 #Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 #Javascript
jquery中的事件处理详细介绍
Jun 24 #Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 #Javascript
Js注册协议倒计时的小例子
Jun 24 #Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 #Javascript
You might like
用PHP生成html分页列表的代码
2007/03/18 PHP
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
需要发散思维学习PHP
2009/06/29 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
JavaScript实现二分查找实例代码
2017/02/22 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
python实现猜单词小游戏
2020/05/22 Python
python实现年会抽奖程序
2019/01/22 Python
Python中的集合介绍
2019/01/28 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
Python 求向量的余弦值操作
2021/03/04 Python
C#可否对内存进行直接的操作
2015/02/26 面试题
理工大学毕业生自荐信
2013/11/01 职场文书
新闻专业本科生的自我评价分享
2013/11/20 职场文书
公司周年庆典邀请函
2014/01/12 职场文书
旷课检讨书大全
2014/01/21 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
蓬莱阁导游词
2015/02/04 职场文书