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


Posted in Javascript onSeptember 22, 2013
<script language=javascript> cities = new Object(); 
cities['台湾']=new Array('台北','台南','其他'); 
cities['马来西亚']=new Array('Malaysia'); 
cities['北京']=new Array('北京'); 
cities['上海']=new Array('上海'); 
cities['天津']=new Array('天津'); 
cities['重庆']=new Array('重庆'); 
cities['河北省']=new Array('石家庄', '张家口', '承德', '秦皇岛', '唐山', '廊坊', '保定', '沧州', '衡水', '邢台', '邯郸'); 
cities['山西省']=new Array('太原', '大同', '朔州', '阳泉', '长治', '晋城', '忻州', '吕梁', '晋中', '临汾', '运城'); 
cities['辽宁省']=new Array('沈阳', '朝阳', '阜新', '铁岭', '抚顺', '本溪', '辽阳', '鞍山', '丹东', '大连', '营口', '盘锦', '锦州', '葫芦岛'); 
cities['吉林省']=new Array('长春', '白城', '松原', '吉林', '四平', '辽源', '通化', '白山', '延边'); 
cities['黑龙江省']=new Array('哈尔滨', '齐齐哈尔', '黑河', '大庆', '伊春', '鹤岗', '佳木斯', '双鸭山', '七台河', '鸡西', '牡丹江', '绥化', '大兴安'); 
cities['江苏省']=new Array('南京', '徐州', '连云港', '宿迁', '淮阴', '盐城', '扬州', '泰州', '南通', '镇江', '常州', '无锡', '苏州'); 
cities['浙江省']=new Array('杭州', '湖州', '嘉兴', '舟山', '宁波', '绍兴', '金华', '台州', '温州', '丽水'); 
cities['安徽省']=new Array('合肥', '宿州', '淮北', '阜阳', '蚌埠', '淮南', '滁州', '马鞍山', '芜湖', '铜陵', '安庆', '黄山', '六安', '巢湖', '池州', '宣城'); 
cities['福建省']=new Array('福州', '南平', '三明', '莆田', '泉州', '厦门', '漳州', '龙岩', '宁德'); 
cities['江西省']=new Array('南昌', '九江', '景德镇', '鹰潭', '新余', '萍乡', '赣州', '上饶', '抚州', '宜春', '吉安'); 
cities['山东省']=new Array('济南', '聊城', '德州', '东营', '淄博', '潍坊', '烟台', '威海', '青岛', '日照', '临沂', '枣庄', '济宁', '泰安', '莱芜', '滨州', '菏泽'); 
cities['河南省']=new Array('郑州', '三门峡', '洛阳', '焦作', '新乡', '鹤壁', '安阳', '濮阳', '开封', '商丘', '许昌', '漯河', '平顶山', '南阳', '信阳', '周口', '驻马店'); 
cities['湖北省']=new Array('武汉', '十堰', '襄攀', '荆门', '孝感', '黄冈', '鄂州', '黄石', '咸宁', '荆州', '宜昌', '恩施', '襄樊'); 
cities['湖南省']=new Array('长沙', '张家界', '常德', '益阳', '岳阳', '株洲', '湘潭', '衡阳', '郴州', '永州', '邵阳', '怀化', '娄底', '湘西'); 
cities['广东省']=new Array('广州', '清远', '韶关', '河源', '梅州', '潮州', '汕头', '揭阳', '汕尾', '惠州', '东莞', '深圳', '珠海', '江门', '佛山', '肇庆', '云浮', '阳江', '茂名', '湛江'); 
cities['海南省']=new Array('海口', '三亚'); 
cities['四川省']=new Array('成都', '广元', '绵阳', '德阳', '南充', '广安', '遂宁', '内江', '乐山', '自贡', '泸州', '宜宾', '攀枝花', '巴中', '达川', '资阳', '眉山', '雅安', '阿坝', '甘孜', '凉山'); 
cities['贵州省']=new Array('贵阳', '六盘水', '遵义', '毕节', '铜仁', '安顺', '黔东南', '黔南', '黔西南'); 
cities['云南省']=new Array('昆明', '曲靖', '玉溪', '丽江', '昭通', '思茅', '临沧', '保山', '德宏', '怒江', '迪庆', '大理', '楚雄', '红河', '文山', '西双版纳'); 
cities['陕西省']=new Array('西安', '延安', '铜川', '渭南', '咸阳', '宝鸡', '汉中', '榆林', '商洛', '安康'); 
cities['甘肃省']=new Array('兰州', '嘉峪关', '金昌', '白银', '天水', '酒泉', '张掖', '武威', '庆阳', '平凉', '定西', '陇南', '临夏', '甘南'); 
cities['青海省']=new Array('西宁', '海东', '西宁', '海北', '海南', '黄南', '果洛', '玉树', '海西'); 
cities['内蒙古']=new Array('呼和浩特', '包头', '乌海', '赤峰', '呼伦贝尔盟', '兴安盟', '哲里木盟', '锡林郭勒盟', '乌兰察布盟', '鄂尔多斯', '巴彦淖尔盟', '阿拉善盟'); 
cities['广西']=new Array('南宁', '桂林', '柳州', '梧州', '贵港', '玉林', '钦州', '北海', '防城港', '南宁', '百色', '河池', '柳州', '贺州'); 
cities['西藏']=new Array('拉萨', '那曲', '昌都', '林芝', '山南', '日喀则', '阿里'); 
cities['宁夏']=new Array('银川', '石嘴山', '吴忠', '固原'); 
cities['新疆']=new Array('乌鲁木齐', '克拉玛依', '喀什', '阿克苏', '和田', '吐鲁番', '哈密', '博尔塔拉', '昌吉', '巴音郭楞', '伊犁', '塔城', '阿勒泰'); 
cities['香港']=new Array('香港'); 
cities['澳门']=new Array('澳门'); 
function set_city(province, city) 
{ 
var pv, cv; 
var i, ii; 
pv=province.value; 
cv=city.value; 
city.length=1; 
if(pv=='0') return; 
if(typeof(cities[pv])=='undefined') return; 
for(i=0; i<cities[pv].length; i++) 
{ 
ii = i+1; 
city.options[ii] = new Option(); 
city.options[ii].text = cities[pv][i]; 
city.options[ii].value = cities[pv][i]; 
} 
} 
</script> 
<SELECT name="sheng" id="to_cn" onchange="set_city(this, document.getElementById('city')); WYL();" class=login_text_input > 
<option value=0>请选择</option> 
<option value=台湾>台湾</option> 
<option value=马来西亚>马来西亚</option> 
<option value=北京>北京</option> 
<option value=上海>上海</option> 
<option value=天津>天津</option> 
<option value=重庆>重庆</option> 
<option value=河北省>河北省</option> 
<option value=山西省>山西省</option> 
<option value=辽宁省>辽宁省</option> 
<option value=吉林省>吉林省</option> 
<option value=黑龙江省>黑龙江省</option> 
<option value=江苏省>江苏省</option> 
<option value=浙江省>浙江省</option> 
<option value=安徽省>安徽省</option> 
<option value=福建省>福建省</option> 
<option value=江西省>江西省</option> 
<option value=山东省>山东省</option> 
<option value=河南省>河南省</option> 
<option value=湖北省>湖北省</option> 
<option value=湖南省>湖南省</option> 
<option value=广东省>广东省</option> 
<option value=海南省>海南省</option> 
<option value=四川省>四川省</option> 
<option value=贵州省>贵州省</option> 
<option value=云南省>云南省</option> 
<option value=陕西省>陕西省</option> 
<option value=甘肃省>甘肃省</option> 
<option value=青海省>青海省</option> 
<option value=内蒙古>内蒙古</option> 
<option value=广西>广西</option> 
<option value=西藏>西藏</option> 
<option value=宁夏>宁夏</option> 
<option value=新疆>新疆</option> 
<option value=香港>香港</option> 
<option value=澳门>澳门</option> 
</SELECT> - 市 
<select id="city" class=login_text_input name="shi"> 
<option value=0>请选择</option> 
</select>
Javascript 相关文章推荐
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 #Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 #Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 #Javascript
js和php如何获取当前url的内容
Sep 22 #Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 #Javascript
非html5实现js版弹球游戏示例代码
Sep 22 #Javascript
多种方法判断Javascript对象是否存在
Sep 22 #Javascript
You might like
PHP与已存在的Java应用程序集成
2006/10/09 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
jquery ui对话框实例代码
2013/05/10 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
Sanic框架路由用法实例分析
2018/07/16 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
2013年研究生毕业感言
2014/02/06 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL