【原创】省市二级联动纯javascript
北京
上海
天津
重庆
河北
山西
内蒙古
辽宁
吉林
黑龙江
江苏
浙江
安徽
福建
江西
山东
河南
湖北
湖南
广东
广西
海南
四川
贵州
云南
西藏
陕西
甘肃
宁夏
青海
新疆
香港
澳门
台湾
<html>
<head>
<script>
var arr = new Array();
arr[0 ]="东城,西城,崇文,宣武,朝阳,丰台,石景山,海淀,门头沟,房山,通州,顺义,昌平,大兴,平谷,怀柔,密云,延庆"
arr[1 ]="黄浦,卢湾,徐汇,长宁,静安,普陀,闸北,虹口,杨浦,闵行,宝山,嘉定,浦东,金山,松江,青浦,南汇,奉贤,崇明"
arr[2 ]="和平,东丽,河东,西青,河西,津南,南开,北辰,河北,武清,红挢,塘沽,汉沽,大港,宁河,静海,宝坻,蓟县"
arr[3 ]="万州,涪陵,渝中,大渡口,江北,沙坪坝,九龙坡,南岸,北碚,万盛,双挢,渝北,巴南,黔江,长寿,綦江,潼南,铜梁,大足,荣昌,壁山,梁平,城口,丰都,垫江,武隆,忠县,开县,云阳,奉节,巫山,巫溪,石柱,秀山,酉阳,彭水,江津,合川,永川,南川"
arr[4 ]="石家庄,邯郸,邢台,保定,张家口,承德,廊坊,唐山,秦皇岛,沧州,衡水"
arr[5 ]="太原,大同,阳泉,长治,晋城,朔州,吕梁,忻州,晋中,临汾,运城"
arr[6 ]="呼和浩特,包头,乌海,赤峰,呼伦贝尔盟,阿拉善盟,哲里木盟,兴安盟,乌兰察布盟,锡林郭勒盟,巴彦淖尔盟,伊克昭盟"
arr[7 ]="沈阳,大连,鞍山,抚顺,本溪,丹东,锦州,营口,阜新,辽阳,盘锦,铁岭,朝阳,葫芦岛"
arr[8 ]="长春,吉林,四平,辽源,通化,白山,松原,白城,延边"
arr[9 ]="哈尔滨,齐齐哈尔,牡丹江,佳木斯,大庆,绥化,鹤岗,鸡西,黑河,双鸭山,伊春,七台河,大兴安岭"
arr[10 ]="南京,镇江,苏州,南通,扬州,盐城,徐州,连云港,常州,无锡,宿迁,泰州,淮安"
arr[11 ]="杭州,宁波,温州,嘉兴,湖州,绍兴,金华,衢州,舟山,台州,丽水"
arr[12 ]="合肥,芜湖,蚌埠,马鞍山,淮北,铜陵,安庆,黄山,滁州,宿州,池州,淮南,巢湖,阜阳,六安,宣城,亳州"
arr[13 ]="福州,厦门,莆田,三明,泉州,漳州,南平,龙岩,宁德"
arr[14 ]="南昌市,景德镇,九江,鹰潭,萍乡,新馀,赣州,吉安,宜春,抚州,上饶"
arr[15 ]="济南,青岛,淄博,枣庄,东营,烟台,潍坊,济宁,泰安,威海,日照,莱芜,临沂,德州,聊城,滨州,菏泽"
arr[16 ]="郑州,开封,洛阳,平顶山,安阳,鹤壁,新乡,焦作,濮阳,许昌,漯河,三门峡,南阳,商丘,信阳,周口,驻马店,济源"
arr[17 ]="武汉,宜昌,荆州,襄樊,黄石,荆门,黄冈,十堰,恩施,潜江,天门,仙桃,随州,咸宁,孝感,鄂州"
arr[18 ]="长沙,常德,株洲,湘潭,衡阳,岳阳,邵阳,益阳,娄底,怀化,郴州,永州,湘西,张家界"
arr[19 ]="广州,深圳,珠海,汕头,东莞,中山,佛山,韶关,江门,湛江,茂名,肇庆,惠州,梅州,汕尾,河源,阳江,清远,潮州,揭阳,云浮"
arr[20 ]="南宁,柳州,桂林,梧州,北海,防城港,钦州,贵港,玉林,南宁地区,柳州地区,贺州,百色,河池"
arr[21 ]="海口,三亚"
arr[22 ]="成都,绵阳,德阳,自贡,攀枝花,广元,内江,乐山,南充,宜宾,广安,达川,雅安,眉山,甘孜,凉山,泸州"
arr[23 ]="贵阳,六盘水,遵义,安顺,铜仁,黔西南,毕节,黔东南,黔南"
arr[24 ]="昆明,大理,曲靖,玉溪,昭通,楚雄,红河,文山,思茅,西双版纳,保山,德宏,丽江,怒江,迪庆,临沧"
arr[25 ]="拉萨,日喀则,山南,林芝,昌都,阿里,那曲"
arr[26 ]="西安,宝鸡,咸阳,铜川,渭南,延安,榆林,汉中,安康,商洛"
arr[27 ]="兰州,嘉峪关,金昌,白银,天水,酒泉,张掖,武威,定西,陇南,平凉,庆阳,临夏,甘南"
arr[28 ]="银川,石嘴山,吴忠,固原"
arr[29 ]="西宁,海东,海南,海北,黄南,玉树,果洛,海西"
arr[30 ]="乌鲁木齐,石河子,克拉玛依,伊犁,巴音郭勒,昌吉,克孜勒苏柯尔克孜,博 尔塔拉,吐鲁番,哈密,喀什,和田,阿克苏"
arr[31 ]="香港"
arr[32 ]="澳门"
arr[33 ]="台北,高雄,台中,台南,屏东,南投,云林,新竹,彰化,苗栗,嘉义,花莲,桃园,宜兰,基隆,台东,金门,马祖,澎湖" function init()
{
var city = document.getElementById("city");
var cityArr = arr[0].split(",");
for(var i=0;i<cityArr.length;i++)
{
city[i]=new Option(cityArr[i],cityArr[i]);
}
} function getCity()
{
var pro = document.getElementById("province");
var city = document.getElementById("city");
var index = pro.selectedIndex;
var cityArr = arr[index].split(","); city.length = 0;
//将城市数组中的值填充到城市下拉框中
for(var i=0;i<cityArr.length;i++)
{
city[i]=new Option(cityArr[i],cityArr[i]);
}
}
</script>
</head>
<body onload="init()">
<select id="province" size=1 onchange="getCity()">
<option value= 0 >北京</option>
<option value= 1 >上海</option>
<option value= 2 >天津</option>
<option value= 3 >重庆</option>
<option value= 4 >河北</option>
<option value= 5 >山西</option>
<option value= 6 >内蒙古</option>
<option value= 7 >辽宁</option>
<option value= 8 >吉林</option>
<option value= 9 >黑龙江</option>
<option value= 10 >江苏</option>
<option value= 11 >浙江</option>
<option value= 12 >安徽</option>
<option value= 13 >福建</option>
<option value= 14 >江西</option>
<option value= 15 >山东</option>
<option value= 16 >河南</option>
<option value= 17 >湖北</option>
<option value= 18 >湖南</option>
<option value= 19 >广东</option>
<option value= 20 >广西</option>
<option value= 21 >海南</option>
<option value= 22 >四川</option>
<option value= 23 >贵州</option>
<option value= 24 >云南</option>
<option value= 25 >西藏</option>
<option value= 26 >陕西</option>
<option value= 27 >甘肃</option>
<option value= 28 >宁夏</option>
<option value= 29 >青海</option>
<option value= 30 >新疆</option>
<option value= 31 >香港</option>
<option value= 32 >澳门</option>
<option value= 33 >台湾</option>
</select> <select id="city" style="width:60px">
</select>
</body>
</html>
【原创】省市二级联动纯javascript的更多相关文章
- JavaScript 实现省市二级联动
JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...
- 省市二级联动--使用app-jquery-cityselect.js插件
只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label&g ...
- jQuery_完成省市二级联动
当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: ...
- 省市二级联动（原生JS）
代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...
- 微信小程序picker组件 - 省市二级联动
picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...
- js省市二级联动实例
//动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- iOS开发之"省市"二级联动的数据组织(PHP版)以及PickerView的实现与封装
之所以要发表这篇博客,还源于最近的开发工作所实现的一个小的Demo, 当然这个Demo不会涉及工作中App的一些内容,下方要实现的Demo是通用的.因为项目需求的迭代,要求在银行卡绑定中添加支行所在的 ...
- [转]省市二级联动（纯js实现）
转至:http://www.jb51.net/article/41556.htm 实现原理: set_city("省名称",市select对象); 判断市select对象是否为空, ...
- javascript 省市二级联动
通过遍历二维数组 获取到 二级列表的 每个option 然后onchange事件 获取到省,然后循环遍历该省具有的市并将遍历到的市添加到id为city的选择器中. 获取完需要清空二级列表的内容,不然不 ...
随机推荐
- svn sc create 命令行创建服务自启动
今天重装了系统,Subversion服务也得重装.照例输入代码: sc create svnserve binpath="d:\PortableApps\svn\svnserve.exe - ...
- textarea高度自适应
var tx=document.getElementById("tx"); tx.style.height=tx.scrollHeight+"px" tx.st ...
- Bootstrap初级用户谈谈网页在手机上的显示效果优化
本人之前已经使用Bootstrap有一段时间了,但是之前做出的网站都只是在电脑端使用,没有注意过手机端的显示效果.这两天自己使用Bootstrap做了一个简单的Web个人日志系统,想在手机端也使用,桌 ...
- 页面异步加载javascript文件
昨天听一同事说的异步加载js文件,可以提高页面加载速度.具体方法如下:(function() { var ga = document.createElement('script'); ga.type ...
- XRPictureBox z
XRPictureBox 大小加入是40x40 我绑定的图片好比是60X50 , 在不自己写代码的情况下,XRPictureBox 有没有什么属性可以调整,比如像SizeMode那种? // Set ...
- Golang做的验证码（2）
前面一篇文章介绍了2个用Golang做的验证码 http://www.cnblogs.com/ghj1976/p/3392847.html 这里再补充几个: 1.在GAE上使用的Google的验证码 ...
- C++中，申请字符串数组可用new实现
C++中,申请字符串数组可用new实现: char ** list = new char*[MAX_NUM]; for (int i = 0; i< MAX_LOOP; i++) list[i] ...
- Maven安装testNG
1.Maven安装testNG (1)打开网站:http://testng.org/doc/maven.html (2)复制如下代码,粘贴到项目的pom.xml文件: 1 <dependency ...
- When not to automate 什么时候不进行自动化
The cornerstone of test automation is the premise that the expected application behavior is known. W ...
- ASP.NET 如何做出简单的验证码
如果说要做验证码,那不得不提的就是GDI+绘图了.我们都知道验证码是以图片形式展示的,而且是动态生成的,这样就需要我们去画出它. 科普一下,什么是GDI+? GDI+是图形设备接口(GDI)的高级版本 ...