js二级地域选择的实现方法


Posted in Javascript onJune 17, 2013

实现二级地域的选择,前端大概有两种表现形式,第一,你是去放上两个文本框,点击文本框一的时候,出现省列表,点击文本框二的时候,出现该省的市区列表;第二种就是放两个下拉框了,在第一个下拉框选中一个,再到第二个去选中相应的市区,当然还有别的方式,我这里就做一种,即下拉选择的,代码如下:
Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
</head> <body> 
<script type="text/javascript">   
function initcity(city) { 
switch (document.creator["province"].value) { 
case "安徽" : var cityOptions = new Array( "请选择地区", "", "合肥(*)", "合肥", "安庆", "安庆", "蚌埠", "蚌埠", "亳州", "亳州", "巢湖", "巢湖", "滁州", "滁州", "阜阳", "阜阳", "贵池", "贵池", "淮北", "淮北", "淮化", "淮化", "淮南", "淮南", "黄山", "黄山", "九华山", "九华山", "六安", "六安", "马鞍山", "马鞍山", "宿州", "宿州", "铜陵", "铜陵", "屯溪", "屯溪", "芜湖", "芜湖", "宣城", "宣城"); break; 
case "北京" : var cityOptions = new Array( "请选择地区", "", "东城", "东城", "西城", "西城", "崇文", "崇文", "宣武", "宣武", "朝阳", "朝阳", "丰台", "丰台", "石景山", "石景山", "海淀", "海淀", "门头沟", "门头沟", "房山", "房山", "通州", "通州", "顺义", "顺义", "昌平", "昌平", "大兴", "大兴", "平谷", "平谷", "怀柔", "怀柔", "密云", "密云", "延庆", "延庆"); break; 
case "重庆" : var cityOptions = new Array( "请选择地区", "", "万州", "万州", "涪陵", "涪陵", "渝中", "渝中", "大渡口", "大渡口", "江北", "江北", "沙坪坝", "沙坪坝", "九龙坡","九龙坡", "南岸", "南岸", "北碚", "北碚", "万盛", "万盛", "双挢", "双挢", "渝北", "渝北", "巴南", "巴南", "黔江", "黔江", "长寿", "长寿", "綦江", "綦江", "潼南", "潼南", "铜梁", "铜梁", "大足", "大足", "荣昌", "荣昌", "壁山", "壁山", "梁平", "梁平", "城口", "城口", "丰都", "丰都", "垫江", "垫江", "武隆", "武隆", "忠县", "忠县", "开县", "开县", "云阳", "云阳", "奉节", "奉节", "巫山", "巫山", "巫溪", "巫溪", "石柱", "石柱", "秀山", "秀山", "酉阳", "酉阳", "彭水", "彭水", "江津", "江津", "合川", "合川", "永川", "永川", "南川", "南川"); break; 
case "福建" : var cityOptions = new Array( "请选择地区", "", "福州(*)", "福州", "福安", "福安", "龙岩", "龙岩", "南平", "南平", "宁德", "宁德", "莆田", "莆田", "泉州", "泉州", "三明", "三明", "邵武", "邵武", "石狮", "石狮", "永安", "永安", "武夷山", "武夷山", "厦门", "厦门", "漳州", "漳州"); break; 
case "甘肃" : var cityOptions = new Array( "请选择地区", "", "兰州(*)", "兰州", "白银", "白银", "定西", "定西", "敦煌", "敦煌", "甘南", "甘南", "金昌", "金昌", "酒泉", "酒泉", "临夏", "临夏", "平凉", "平凉", "天水", "天水", "武都", "武都", "武威", "武威", "西峰", "西峰", "张掖", "张掖"); break; 
case "广东" : var cityOptions = new Array( "请选择地区", "", "广州(*)", "广州", "潮阳", "潮阳", "潮州", "潮州", "澄海", "澄海", "东莞", "东莞", "佛山", "佛山", "河源", "河源", "惠州", "惠州", "江门", "江门", "揭阳", "揭阳", "开平", "开平", "茂名", "茂名", "梅州", "梅州", "清远", "清远", "汕头", "汕头", "汕尾", "汕尾", "韶关", "韶关", "深圳", "深圳", "顺德", "顺德", "阳江", "阳江", "英德", "英德", "云浮", "云浮", "增城", "增城", "湛江", "湛江", "肇庆", "肇庆", "中山", "中山", "珠海", "珠海"); break; 
case "广西" : var cityOptions = new Array( "请选择地区", "", "南宁(*)", "南宁", "百色", "百色", "北海", "北海", "桂林", "桂林", "防城港", "防城港", "河池", "河池", "贺州", "贺州", "柳州", "柳州", "钦州", "钦州", "梧州", "梧州", "玉林", "玉林"); break; 
case "贵州" : var cityOptions = new Array( "请选择地区", "", "贵阳(*)", "贵阳", "安顺", "安顺", "毕节", "毕节", "都匀", "都匀", "凯里", "凯里", "六盘水", "六盘水", "铜仁", "铜仁", "兴义", "兴义", "玉屏", "玉屏", "遵义", "遵义"); break; 
case "海南" : var cityOptions = new Array( "请选择地区", "", "海口(*)", "海口", "儋县", "儋县", "陵水", "陵水", "琼海", "琼海", "三亚", "三亚", "通什", "通什", "万宁", "万宁"); break; 
case "河北" : var cityOptions = new Array( "请选择地区", "", "石家庄(*)", "石家庄", "保定", "保定", "北戴河", "北戴河", "沧州", "沧州", "承德", "承德", "丰润", "丰润", "邯郸", "邯郸", "衡水", "衡水", "廊坊", "廊坊", "南戴河", "南戴河", "秦皇岛", "秦皇岛", "唐山", "唐山", "新城", "新城", "邢台", "邢台", "张家口", "张家口"); break; 
case "黑龙江" : var cityOptions = new Array( "请选择地区", "", "哈尔滨(*)", "哈尔滨", "北安", "北安", "大庆", "大庆", "大兴安岭", "大兴安岭", "鹤岗", "鹤岗", "黑河", "黑河", "佳木斯", "佳木斯", "鸡西", "鸡西", "牡丹江", "牡丹江", "齐齐哈尔", "齐齐哈尔", "七台河", "七台河", "双鸭山", "双鸭山", "绥化", "绥化", "伊春", "伊春"); break; 
case "河南" : var cityOptions = new Array( "请选择地区", "", "郑州(*)", "郑州", "安阳", "安阳", "鹤壁", "鹤壁", "潢川", "潢川", "焦作", "焦作", "济源", "济源", "开封", "开封", "漯河", "漯河", "洛阳", "洛阳", "南阳", "南阳", "平顶山", "平顶山", "濮阳", "濮阳", "三门峡", "三门峡", "商丘", "商丘", "新乡", "新乡", "信阳", "信阳", "许昌", "许昌", "周口", "周口", "驻马店", "驻马店"); break; 
case "香港" : var cityOptions = new Array( "请选择地区", "", "香港", "香港", "九龙", "九龙", "新界", "新界"); break; 
case "湖北" : var cityOptions = new Array( "请选择地区", "", "武汉(*)", "武汉", "恩施", "恩施", "鄂州", "鄂州", "黄冈", "黄冈", "黄石", "黄石", "荆门", "荆门", "荆州", "荆州", "潜江", "潜江", "十堰", "十堰", "随州", "随州", "武穴", "武穴", "仙桃", "仙桃", "咸宁", "咸宁", "襄阳", "襄阳", "襄樊", "襄樊", "孝感", "孝感", "宜昌", "宜昌"); break; 
case "湖南" : var cityOptions = new Array( "请选择地区", "", "长沙(*)", "长沙", "常德", "常德", "郴州", "郴州", "衡阳", "衡阳", "怀化", "怀化", "吉首", "吉首", "娄底", "娄底", "邵阳", "邵阳", "湘潭", "湘潭", "益阳", "益阳", "岳阳", "岳阳", "永州", "永州", "张家界", "张家界", "株洲", "株洲"); break; 
case "江苏" : var cityOptions = new Array( "请选择地区", "", "南京(*)", "南京", "常熟", "常熟", "常州", "常州", "海门", "海门", "淮安", "淮安", "江都", "江都", "江阴", "江阴", "昆山", "昆山", "连云港", "连云港", "南通", "南通", "启东", "启东", "沭阳", "沭阳", "宿迁", "宿迁", "苏州", "苏州", "太仓", "太仓", "泰州", "泰州", "同里", "同里", "无锡", "无锡", "徐州", "徐州", "盐城", "盐城", "扬州", "扬州", "宜兴", "宜兴", "仪征", "仪征", "张家港", "张家港", "镇江", "镇江", "周庄", "周庄"); break; 
case "江西" : var cityOptions = new Array( "请选择地区", "", "南昌(*)", "南昌", "抚州", "抚州", "赣州", "赣州", "吉安", "吉安", "景德镇", "景德镇", "井冈山", "井冈山", "九江", "九江", "庐山", "庐山", "萍乡", "萍乡", "上饶", "上饶", "新余", "新余", "宜春", "宜春", "鹰潭", "鹰潭"); break; 
case "吉林" : var cityOptions = new Array( "请选择地区", "", "长春(*)", "长春", "白城", "白城", "白山", "白山", "珲春", "珲春", "辽源", "辽源", "梅河", "梅河", "吉林", "吉林", "四平", "四平", "松原", "松原", "通化", "通化", "延吉", "延吉"); break; 
case "辽宁" : var cityOptions = new Array( "请选择地区", "", "沈阳(*)", "沈阳", "鞍山", "鞍山", "本溪", "本溪", "朝阳", "朝阳", "大连", "大连", "丹东", "丹东", "抚顺", "抚顺", "阜新", "阜新", "葫芦岛", "葫芦岛", "锦州", "锦州", "辽阳", "辽阳", "盘锦", "盘锦", "铁岭", "铁岭", "营口", "营口"); break; 
case "澳门" : var cityOptions = new Array( "请选择地区", "", "澳门", "澳门"); break; 
case "内蒙古" : var cityOptions = new Array( "请选择地区", "", "呼和浩特(*)", "呼和浩特", "阿拉善盟", "阿拉善盟", "包头", "包头", "赤峰", "赤峰", "东胜", "东胜", "海拉尔", "海拉尔", "集宁", "集宁", "临河", "临河", "通辽", "通辽", "乌海", "乌海", "乌兰浩特", "乌兰浩特", "锡林浩特", "锡林浩特"); break; 
case "宁夏" : var cityOptions = new Array( "请选择地区", "", "银川(*)", "银川", "固源", "固源", "石嘴山", "石嘴山", "吴忠", "吴忠"); break; 
case "青海" : var cityOptions = new Array( "请选择地区", "", "西宁(*)", "西宁", "德令哈", "德令哈", "格尔木", "格尔木", "共和", "共和", "海东", "海东", "海晏", "海晏", "玛沁", "玛沁", "同仁", "同仁", "玉树", "玉树"); break; 
case "山东" : var cityOptions = new Array( "请选择地区", "", "济南(*)", "济南", "滨州", "滨州", "兖州", "兖州", "德州", "德州", "东营", "东营", "菏泽", "菏泽", "济宁", "济宁", "莱芜", "莱芜", "聊城", "聊城", "临沂", "临沂", "蓬莱", "蓬莱", "青岛", "青岛", "曲阜", "曲阜", "日照", "日照", "泰安", "泰安", "潍坊", "潍坊", "威海", "威海", "烟台", "烟台", "枣庄", "枣庄", "淄博", "淄博"); break; 
case "上海" : var cityOptions = new Array( "请选择地区", "", "崇明", "崇明", "黄浦", "黄浦", "卢湾", "卢湾", "徐汇", "徐汇", "长宁", "长宁", "静安", "静安", "普陀", "普陀", "闸北", "闸北", "虹口", "虹口", "杨浦", "杨浦", "闵行", "闵行", "宝山", "宝山", "嘉定", "嘉定", "浦东", "浦东", "金山", "金山", "松江", "松江", "青浦", "青浦", "南汇", "南汇", "奉贤", "奉贤"); break; 
case "山西" : var cityOptions = new Array( "请选择地区", "", "太原(*)", "太原", "长治", "长治", "大同", "大同", "候马", "候马", "晋城", "晋城", "离石", "离石", "临汾", "临汾", "宁武", "宁武", "朔州", "朔州", "忻州", "忻州", "阳泉", "阳泉", "榆次", "榆次", "运城", "运城"); break; 
case "陕西" : var cityOptions = new Array( "请选择地区", "", "西安(*)", "西安", "安康", "安康", "宝鸡", "宝鸡", "汉中", "汉中", "渭南", "渭南", "商州", "商州", "绥德", "绥德", "铜川", "铜川", "咸阳", "咸阳", "延安", "延安", "榆林", "榆林"); break; 
case "四川" : var cityOptions = new Array( "请选择地区", "", "成都(*)", "成都", "巴中", "巴中", "达川", "达川", "德阳", "德阳", "都江堰", "都江堰", "峨眉山", "峨眉山", "涪陵", "涪陵", "广安", "广安", "广元", "广元", "九寨沟", "九寨沟", "康定", "康定", "乐山", "乐山", "泸州", "泸州", "马尔康", "马尔康", "绵阳", "绵阳", "眉山", "眉山", "南充", "南充", "内江", "内江", "攀枝花", "攀枝花", "遂宁", "遂宁", "汶川", "汶川", "西昌", "西昌", "雅安", "雅安", "宜宾", "宜宾", "自贡", "自贡", "资阳", "资阳"); break; 
case "台湾" : var cityOptions = new Array( "请选择地区", "", "台北(*)", "台北", "基隆", "基隆", "台南", "台南", "台中", "台中", "高雄", "高雄", "屏东", "屏东", "南投", "南投", "云林", "云林", "新竹", "新竹", "彰化", "彰化", "苗栗", "苗栗", "嘉义", "嘉义", "花莲", "花莲", "桃园", "桃园", "宜兰", "宜兰", "台东", "台东", "金门", "金门", "马祖", "马祖", "澎湖", "澎湖"); break; 
case "天津" : var cityOptions = new Array( "请选择地区", "", "天津", "天津", "和平", "和平", "东丽", "东丽", "河东", "河东", "西青", "西青", "河西", "河西", "津南", "津南", "南开", "南开", "北辰", "北辰", "河北", "河北", "武清", "武清", "红挢", "红挢", "塘沽", "塘沽", "汉沽", "汉沽", "大港", "大港", "宁河", "宁河", "静海", "静海", "宝坻", "宝坻", "蓟县", "蓟县" ); break; 
case "新疆" : var cityOptions = new Array( "请选择地区", "", "乌鲁木齐(*)", "乌鲁木齐", "阿克苏", "阿克苏", "阿勒泰", "阿勒泰", "阿图什", "阿图什", "博乐", "博乐", "昌吉", "昌吉", "东山", "东山", "哈密", "哈密", "和田", "和田", "喀什", "喀什", "克拉玛依", "克拉玛依", "库车", "库车", "库尔勒", "库尔勒", "奎屯", "奎屯", "石河子", "石河子", "塔城", "塔城", "吐鲁番", "吐鲁番", "伊宁", "伊宁"); break; 
case "西藏" : var cityOptions = new Array( "请选择地区", "", "拉萨(*)", "拉萨", "阿里", "阿里", "昌都", "昌都", "林芝", "林芝", "那曲", "那曲", "日喀则", "日喀则", "山南", "山南"); break; 
case "云南" : var cityOptions = new Array( "请选择地区", "", "昆明(*)", "昆明", "大理", "大理", "保山", "保山", "楚雄", "楚雄", "大理", "大理", "东川", "东川", "个旧", "个旧", "景洪", "景洪", "开远", "开远", "临沧", "临沧", "丽江", "丽江", "六库", "六库", "潞西", "潞西", "曲靖", "曲靖", "思茅", "思茅", "文山", "文山", "西双版纳", "西双版纳", "玉溪", "玉溪", "中甸", "中甸", "昭通", "昭通"); break; 
case "浙江" : var cityOptions = new Array( "请选择地区", "", "杭州(*)", "杭州", "安吉", "安吉", "慈溪", "慈溪", "定海", "定海", "奉化", "奉化", "海盐", "海盐", "黄岩", "黄岩", "湖州", "湖州", "嘉兴", "嘉兴", "金华", "金华", "临安", "临安", "临海", "临海", "丽水", "丽水", "宁波", "宁波", "瓯海", "瓯海", "平湖", "平湖", "千岛湖", "千岛湖", "衢州", "衢州", "江山", "江山", "瑞安", "瑞安", "绍兴", "绍兴", "嵊州", "嵊州", "台州", "台州", "温岭", "温岭", "温州", "温州", "余姚", "余姚", "舟山", "舟山"); break; 
case "海外" : var cityOptions = new Array( "请选择地区", "", "欧洲", "欧洲", "北美", "北美", "南美", "南美", "亚洲", "亚洲", "非洲", "非洲", "大洋洲", "大洋洲"); break; default: var cityOptions = new Array("请选择地区", ""); break; } document.creator["city"].options.length = 0; for(var i = 0; i < cityOptions.length/2; i++) { document.creator["city"].options[i]=new Option(cityOptions[i*2],cityOptions[i*2+1]); if (document.creator["city"].options[i].value==city){ document.creator["city"].selectedIndex = i; } } } function creatprovince(province){ var provinces = new Array( "北京", "上海", "重庆", "安徽", "福建", "甘肃", "广东", "广西", "贵州", "海南", "河北", "黑龙江", "河南", "香港", "湖北", "湖南", "江苏", "江西", "吉林", "辽宁", "澳门", "内蒙古", "宁夏", "青海", "山东", "山西", "陕西", "四川", "台湾", "天津", "新疆", "西藏", "云南", "浙江", "海外" ); document.creator["province"].options[0]=new Option("请选择省份",""); for(var i = 0; i < provinces.length; i++) { document.creator["province"].options[i+1]=new Option(provinces[i],provinces[i]); if (document.creator["province"].options[i+1].value==province){ document.creator["province"].selectedIndex = i+1; } } } 
</script> 
<form name=creator> 
<select onchange="initcity();" name="province" > 
             <SCRIPT>creatprovince();</SCRIPT> 
</select> 
<select name="city"> 
           <option value="">选择城市</option> 
</select> 
</form>  
</body> 
</html>

 本来打算用循环生成数组做演示的,可是想想,既然是二级地区的级联,那还是规范些好,这样大家看的清楚,选择上也清晰些,虽然这篇文章大都是地名.........
Javascript 相关文章推荐
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 #Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 #Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 #Javascript
js特效,页面下雪的小例子
Jun 17 #Javascript
js弹出窗口之弹出层的小例子
Jun 17 #Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 #Javascript
JS简单的轮播的图片滚动实例
Jun 17 #Javascript
You might like
php分页函数
2006/07/08 PHP
Linux下安装PHP MSSQL扩展教程
2014/10/24 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
Yii中表单用法实例详解
2016/01/05 PHP
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
go语言计算两个时间的时间差方法
2015/03/13 Python
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
提升Python程序运行效率的6个方法
2015/03/31 Python
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
Python实现AI换脸功能
2020/04/10 Python
如何一键升级Python所有包
2020/11/05 Python
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
测绘工程个人的自我评价
2013/11/10 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
研究生个人学年总结
2015/02/14 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
交通事故起诉书
2015/05/19 职场文书
教师培训学习心得体会
2016/01/21 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python