主要使用到到了地址JSON格式，来做，没有涉及数据库的读取。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级联动练习</title>
<script src="jquery-1.11.3.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
var provinceWithCitys = {
"北京": ["西城", "东城", "崇文", "宣武", "朝阳", "海淀", "丰台", "石景山", "门头沟", "房山", "通州", "顺义", "大兴", "昌平", "平谷", "怀柔", "密云", "延庆"],
"天津": ["青羊", "河东", "河西", "南开", "河北", "红桥", "塘沽", "汉沽", "大港", "东丽", "西青", "北辰", "津南", "武清", "宝坻", "静海", "宁河", "蓟县", "开发区"],
"河北": ["石家庄", "秦皇岛", "廊坊", "保定", "邯郸", "唐山", "邢台", "衡水", "张家口", "承德", "沧州", "衡水"],
"山西": ["太原", "大同", "长治", "晋中", "阳泉", "朔州", "运城", "临汾"],
"内蒙古": ["呼和浩特", "赤峰", "通辽", "锡林郭勒", "兴安"],
"辽宁": ["大连", "沈阳", "鞍山", "抚顺", "营口", "锦州", "丹东", "朝阳", "辽阳", "阜新", "铁岭", "盘锦", "本溪", "葫芦岛"],
"吉林": ["长春", "吉林", "四平", "辽源", "通化", "延吉", "白城", "辽源", "松原", "临江", "珲春"],
"黑龙江": ["哈尔滨", "齐齐哈尔", "大庆", "牡丹江", "鹤岗", "佳木斯", "绥化"],
"上海": ["浦东", "杨浦", "徐汇", "静安", "卢湾", "黄浦", "普陀", "闸北", "虹口", "长宁", "宝山", "闵行", "嘉定", "金山", "松江", "青浦", "崇明", "奉贤", "南汇"],
"江苏": ["南京", "苏州", "无锡", "常州", "扬州", "徐州", "南通", "镇江", "泰州", "淮安", "连云港", "宿迁", "盐城", "淮阴", "沐阳", "张家港"],
"浙江": ["杭州", "金华", "宁波", "温州", "嘉兴", "绍兴", "丽水", "湖州", "台州", "舟山", "衢州"],
"安徽": ["合肥", "马鞍山", "蚌埠", "黄山", "芜湖", "淮南", "铜陵", "阜阳", "宣城", "安庆"],
"福建": ["福州", "厦门", "泉州", "漳州", "南平", "龙岩", "莆田", "三明", "宁德"],
"江西": ["南昌", "景德镇", "上饶", "萍乡", "九江", "吉安", "宜春", "鹰潭", "新余", "赣州"],
"山东": ["青岛", "济南", "淄博", "烟台", "泰安", "临沂", "日照", "德州", "威海", "东营", "荷泽", "济宁", "潍坊", "枣庄", "聊城"],
"河南": ["郑州", "洛阳", "开封", "平顶山", "濮阳", "安阳", "许昌", "南阳", "信阳", "周口", "新乡", "焦作", "三门峡", "商丘"],
"湖北": ["武汉", "襄樊", "孝感", "十堰", "荆州", "黄石", "宜昌", "黄冈", "恩施", "鄂州", "江汉", "随枣", "荆沙", "咸宁"],
"湖南": ["长沙", "湘潭", "岳阳", "株洲", "怀化", "永州", "益阳", "张家界", "常德", "衡阳", "湘西", "邵阳", "娄底", "郴州"],
"广东": ["广州", "深圳", "东莞", "佛山", "珠海", "汕头", "韶关", "江门", "梅州", "揭阳", "中山", "河源", "惠州", "茂名", "湛江", "阳江", "潮州", "云浮", "汕尾", "潮阳", "肇庆", "顺德", "清远"],
"广西": ["南宁", "桂林", "柳州", "梧州", "来宾", "贵港", "玉林", "贺州"],
"海南": ["海口", "三亚"],
"重庆": ["渝中", "大渡口", "江北", "沙坪坝", "九龙坡", "南岸", "北碚", "万盛", "双桥", "渝北", "巴南", "万州", "涪陵", "黔江", "长寿"],
"四川": ["成都", "达州", "南充", "乐山", "绵阳", "德阳", "内江", "遂宁", "宜宾", "巴中", "自贡", "康定", "攀枝花"],
"贵州": ["贵阳", "遵义", "安顺", "黔西南", "都匀"],
"云南": ["昆明", "丽江", "昭通", "玉溪", "临沧", "文山", "红河", "楚雄", "大理"],
"西藏": ["拉萨", "林芝", "日喀则", "昌都"],
"陕西": ["西安", "咸阳", "延安", "汉中", "榆林", "商南", "略阳", "宜君", "麟游", "白河"],
"甘肃": ["兰州", "金昌", "天水", "武威", "张掖", "平凉", "酒泉"],
"青海": ["黄南", "海南", "西宁", "海东", "海西", "海北", "果洛", "玉树"],
"宁夏": ["银川", "吴忠"],
"新疆": ["乌鲁木齐", "哈密", "喀什", "巴音郭楞", "昌吉", "伊犁", "阿勒泰", "克拉玛依", "博尔塔拉"],
"香港": ["中西区", "湾仔区", "东区", "南区", "九龙-油尖旺区", "九龙-深水埗区", "九龙-九龙城区", "九龙-黄大仙区", "九龙-观塘区", "新界-北区", "新界-大埔区", "新界-沙田区", "新界-西贡区", "新界-荃湾区", "新界-屯门区", "新界-元朗区", "新界-葵青区", "新界-离岛区"],
"澳门": ["花地玛堂区", "圣安多尼堂区", "大堂区", "望德堂区", "风顺堂区", "嘉模堂区", "圣方济各堂区", "路氹城"]
};

var provinces = [];
for (var first in provinceWithCitys){
provinces.push(first);
}

for( var i= 0; i < provinces.length; i++){
$("#province").append("<option value= "+ provinces[i] + " >" + provinces[i] + "</option>");
}

$("#province").on('change', function(e) {
//console.log(e.target.value);
var citys = provinceWithCitys[e.target.value];
$("#zones").empty();
for(var i= 0; i < citys.length; i++){
$("#zones").append("<option value= "+ citys[i] + " >" + citys[i] + "</option>");
}
$("#zones").on('change', function(e) {
//console.log(e.target.value);
});
});
});

</script>

<div class="liandong">
<select name="" id="province">
<option value="" selected="">请选择省或则直辖市</option>
<!--这里遍历省和直辖市-->

</select>
<select name="" id="zones">
<option value="" selected="">请选择市或则区</option>
<!--根据省和直辖市获取相应的区-->
</select>
</div>

</body>
</html>

里面我重新认识的是target。获取当前时间的节点，这个在很多地方用的比较多。

最开始的想法，是在直辖市和省里面，用一个数组provinces[i]存取，后面的市和直辖市的区用一个二维数组来存取cities[i][j]，两边的i相同，把前面的i放在value里面，当省和直辖市change的时候，将value传递到后面（以前在php中是这样做的，那涉及到数据读取，用的是ajax），然后后面的在根据i 来获取对应的市或者直辖市的区。

感想：

　　为了验证效果，里面的的测试数据是用JSON数组，有需要可以从后端调取。一切只为更加准确验证程序。

　　js有在前端还是以校验为主，为了使MVC更加清晰和彻底，就不用其他语言来遍历前端数据，直接使用js来渲染前端，后台负者提供相应的接口。

Javascript中二级联动的更多相关文章

  1. javascript 省市二级联动

    通过遍历二维数组 获取到 二级列表的 每个option 然后onchange事件 获取到省,然后循环遍历该省具有的市并将遍历到的市添加到id为city的选择器中. 获取完需要清空二级列表的内容,不然不 ...

  2. 利用JavaScript来实现省份—市县的二级联动

    所谓省-市二级联动是指当选择省份下拉选择框时,市县的下拉框会根据选择的省市而有相应的市县加载出来,如下图所示选择"上海市",城市的下拉选择框只会出现上海的市县: 这种二级联动非常常 ...

  3. javascript二级联动

    二级联动在一般的网页中随处可见,一般是地址,比如点击浙江省,随后出现的是杭州市,嘉兴市:点击北京省出现的是朝阳,海淀,而不是出现杭州,嘉兴. 要想实现这个步骤,就要用到javascript来实现.其中 ...

  4. JavaScript日历控件开发 C# 读取 appconfig文件配置数据库连接字符串，和配置文件 List<T>.ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp.net core导入excel 一个二级联动

    JavaScript日历控件开发   概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果代码地址:https://github.com/aspwebc ...

  5. JavaScript 实现省市二级联动

    JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...

  6. Spring MVC中Ajax实现二级联动

    今天写项目遇到了二级联动,期间遇到点问题,写个博客记录一下. 后台Controller: @RequestMapping("/faultType") @ResponseBody p ...

  7. android中利用实现二级联动的效果

    按照惯例,首先上一张效果图. 本篇文章实现的效果就是如图中所圈的那样,实现类似于HTML中的二级联动的效果. 对于第一个选项我们读取的是本地xml文件来填充数据的, 对于第二个选项我们读取的是通过中央 ...

  8. 二级联动，三级联动，初学者，纯javascript，不含jQuery

    二级联动: html代码: <body> <select id="province" onchange="getCity(this.options.se ...

  9. JavaScript+Json写的二级联动

    省市区的联动,相当常见 我就不写这么大数据的了,先写个简单的试一试 <!DOCTYPE html> <html> <head> <title></ ...

随机推荐

  1. linq 动态排序，不使用反射

    之前网上搜索的相关方法都是使用了反射的方法来动态获取字段,以实现动态linq排序,但是因为项目组觉得此方法效率低下,所以不予采纳. 所以有了以下代码 public interface IBase{ d ...

  2. HTML第四天学习笔记

    今天老师教了下无序列表和有序列表,虽然并没有,同时做了个随堂练习: <html> <head> <title>随堂练习00</title> <me ...

  3. Adobe Photoshop CC 14.0简体中文特别版32位和64位下载

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  4. MyEclipse使用总结——使用MyEclipse打包带源码的jar包

    平时开发中,我们喜欢将一些类打包成jar包,然后在别的项目中继续使用,不过由于看不到jar包里面的类的源码了,所以也就无法调试,要想调试,那么就只能通过关联源代码的形式,这样或多或少也有一些不方便,今 ...

  5. C166 Interfacing C to Assembler

    Interfacing C to Assembler You can easily interface your C programs to routines written in XC16x/C16 ...

  6. Server对象的Execute方法

    Server 对象是专门为处理服务器上的特定任务而设计的,它提供了对服务器上的方法和属性的访问,通过调用这些方法和属性的设置,可以允许用户使用服务器上的许多功能,如可以取得服务器运行环境的功能,但最重 ...

  7. 从零开始学android开发-项目重命名

    --修改项目名称 选中项目-[refactor]-[rename] --修改package名称 选中需要重命名的包-[refactor]-[rename] --修改gen下面的名称 打开Android ...

  8. Android定时器，推荐ScheduledThreadPoolExecutor

    Android定时器,推荐ScheduledThreadPoolExecutor 官方网址:http://developer.android.com/reference/java/util/Timer ...

  9. iOS开发——实战OC篇&环境搭建之StoryBoard（玩转UINavigationController与UITabBarController）

      环境搭建之StoryBoard(玩转UINavigationController与UITabBarController)   研究了这么就IOS开发,都没有所处一个像样或者自己忙一点的项目.最近自 ...

  10. Android下用Properties保存程序配置

    读写函数分别例如以下: import java.io.FileInputStream; import java.io.FileOutputStream; import java.util.Proper ...