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 相关文章推荐
JS应用之禁止抓屏、复制、打印
Feb 21 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
js工具方法弹出蒙版
May 08 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
微信小程序 教程之引用
Oct 18 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 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
基于mysql的bbs设计(三)
2006/10/09 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
python使用socket进行简单网络连接的方法
2015/04/29 Python
python自动裁剪图像代码分享
2017/11/25 Python
Python内建模块struct实例详解
2018/02/02 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
Python简单实现区域生长方式
2020/01/16 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
支教自我鉴定
2014/01/18 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
企业节能减排实施方案
2014/03/19 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js