之前用jq 做过一次三联联动以及四联联动

现在为了更好地了解对象用js的原生方式做了一次

*本节要点方法:

 obj.selectedIndex  获取下拉列表选中的option 的索引

 obj.options[obj.selectedIndex].text  获取对应下标option的文本值

 obj.onchange =function(){}  下拉列表选中option更改事件

 
知道这些方法之后我们就可以开始动手了

下面是html代码

<select id="provin">
<option>请选择省</option>
</select>
<select id="city">
<option>请选择市</option>
</select>
<select id="area">
<option>请选择区/县</option>
</select>

js代码:

注释应该能够很好地说明了

<script type="text/javascript">
window.onload = function(){
//建一个 data对象此对象里面有三个省名的属性
//各个省名的属性又有几个对应市名的属性
//各个市名属性的值包含着对应的区/县名
var data = {
广东省:{
广州市:"荔湾区,越秀区,海珠区,天河区,芳村区,白云区,黄埔区,番禺市,花都市,增城市,从化市",
深圳市:"罗湖区,福田区,南山区,宝安区,龙岗区,盐田区",
珠海市:"香洲区,斗门区,金湾区",
湛江市:"赤坎区,霞山区,坡头区,麻章区,竹溪县,徐闻县,廉江市,雷州市,吴川市"
},
河北省:{
石家庄市:"深泽县,无极县,赵县",
唐山市:"玉田县,遵化市,迁安市"
},
山东省:{
济南市:"历下区,市中区,槐荫区,天桥区,历城区,长清县,平阴县,济阳县,商河县,章丘市",
青岛市:"市南区,市北区,四方区,黄岛区,崂山区,李沧区,城阳区"
} } var provin = document.getElementById('provin');
var city = document.getElementById('city');
var area = document.getElementById('area');
var provinDefaultTxt = provin.options[0].text;
var cityDefaultTxt = city.options[0].text;
var areaDefaultTxt = area.options[0].text;
//获取三个下拉列表元素以及他们的默认值 //开始循环遍历对象data
for(key in data){
var newElemForPro = document.createElement("option");
var newProElemTxt = document.createTextNode(key);
newElemForPro.setAttribute("value",key);
newElemForPro.appendChild(newProElemTxt);
provin.appendChild(newElemForPro);
//把遍历出来的省份名添加到第一个下拉列表中 //当省份下拉列表变化时
provin.onchange = function(){
//获取选中option的索引
var provinSelectedIndex = this.selectedIndex;
//通过选中option的索引找到 option的文本内容
var provinSelectedText = this.options[provinSelectedIndex].text;
//在data数组里面找到对应的键 并将其值赋值给另外一个变量(通过键值对的形式返回出一个对象)
var CityObject = data[provinSelectedText];
//清空city下拉列表的内容
city.options.length = 0; //如果选中了默认值其他两个下拉列表都会变为默认值
if (provinSelectedText == provinDefaultTxt) {
area.options.length = 0;
var cityNewElem = document.createElement("option");
var cityTxt = document.createTextNode(cityDefaultTxt);
var areaNewElem = document.createElement("option");
var areaTxt = document.createTextNode(areaDefaultTxt);
cityNewElem.appendChild(cityTxt);
city.appendChild(cityNewElem);
areaNewElem.appendChild(areaTxt);
area.appendChild(areaNewElem); } //把对应省份的市名对象遍历一次
for(cityKey in CityObject){
var CityElem = document.createElement("option");
var CityElemTxt = document.createTextNode(cityKey);
CityElem.appendChild(CityElemTxt);
CityElem.setAttribute("value",cityKey);
city.appendChild(CityElem);
//把遍历出来的城市名添加到第二个下拉列表中 } //然后这里也是一样 获取选中的城市名索引
var citySelectedIndex = city.selectedIndex;
//根据这个索引找到选中 option的文本值
var citySelectedText = city.options[citySelectedIndex].text;
//通过这个市名的值找到对应的对象然后赋值给一个变量
//因为区/县名是一个字符串所以用 split() 方法将他们以逗号分隔变成一个数组
var areaObject = CityObject[citySelectedText].split(",");
//将第三个下拉框清空
area.options.length = 0; //运用闭包模拟块级作用域 循环中的变量不会永远保存
(function(){
//遍历区/县数组添加到第三个下拉框中
for(var i = 0; i < areaObject.length; i++){
var areaElem = document.createElement("option");
var areaElemTxt = document.createTextNode(areaObject[i]);
areaElem.appendChild(areaElemTxt);
areaElem.setAttribute("value",areaObject[i]);
area.appendChild(areaElem);
}
})(); //当市名下列列表发生变化的时候
city.onchange = function(){
//此时 citySelectedIndex 和 citySelectedText 变量已存在
//将他们直接获取新值就可以了不用再重新声明
citySelectedIndex = city.selectedIndex;
citySelectedText = city.options[citySelectedIndex].text;
//清空区/县下拉列表内容
area.options.length = 0; //根据选中的市名取出对应的区/县名
//同理调用split() 方法变成数组
areaObject = CityObject[citySelectedText].split(",");
(function(){
//遍历数组 添加到区/县下拉列表中
for(var i = 0; i < areaObject.length; i++){
var areaElem = document.createElement("option");
var areaElemTxt = document.createTextNode(areaObject[i]);
areaElem.appendChild(areaElemTxt);
areaElem.setAttribute("value",areaObject[i]);
area.appendChild(areaElem);
}
})();
}
}
} }
</script>

 还要说一下以前jq的联动笔记说data是数组其实那时候理解得不够清楚 刚好这几天看高程深刻理解了对象、构造函数以及闭包的原理后才有了更深刻的理解

【实践】用for-in 循环实现三联联动的更多相关文章

  1. 【实践】jQuery实现三联联动

    网上看过很多关于联动的jq或js代码,最近班上的前端大神教了我一种比网上还简单的jq联动方法,自己琢磨过之后确实比其他方法更简单更简洁所以在这里分享一下 先上html代码 <div id=&qu ...

  2. 富士康的盈利秒杀99%的A股公司:3星|《三联生活周刊》2018年10期

    三联生活周刊·最美的数学:天才为何成群到来(2018年10期) 本期专题是数学和成都,我都跳过去没看.其他内容也还有点意思. 总体评价3星. 以下是本期一些内容的摘抄,#号后面是kindle电子版中的 ...

  3. matlab for循环的三种类型

    学习了一半了,发现一个好网站,就是我想写这篇博客用的,网络真是个好东西!纪念下国庆啦 网址:http://www.yiibai.com/matlab/matlab_for_loop.html ---- ...

  4. App架构师实践指南六之性能优化三

    App架构师实践指南六之性能优化三 2018年08月02日 13:57:57 nicolelili1 阅读数:190   内存性能优化1.内存机制和原理 1.1 内存管理内存时一个基础又高深的话题,从 ...

  5. 用循环将三个DIV变成红色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JavaScript小练习3-用循环使三个DIV变色

    题目 初始为黑色,点击后为红色,再次点击为黑色,以后每次点击一次变色. 分析 简单的onclick使用. button的居中可以在外套一个p元素,body中让p居中即可. 三个DIV块的居中,使用ma ...

  7. MATLAB for循环优化三例

    最近一周,对MATLAB有进行了新一轮的学习,对其矩阵化编程的思维有了更深入的了解.确实精妙! 例1: 将矩阵A= [1 2 3; 2 4 3; 3 4 5]中所有的数字3替换为33. 如果还停留在C ...

  8. for循环的三种写法

    第一种写法  传统的方法,遍历数组 String[] arr = { "amy", "heinrich", "cindy", "g ...

  9. php数组循环的三种方式

    PHP 的遍历数组的三种方式:for循环.foreach循环.while.list().each()组合循环 PHP当中数组分为:索引数组[转换成json是数组]和关联数组[转换成json是对象] f ...

随机推荐

  1. NET牛人应该知道些什么?(瞬间觉得自己弱爆了)

    任何一个使用.NET的人 描述线程与进程的区别? 什么是Windows服务,它的生命周期与标准的EXE程序有什么不同 Windows上的单个进程所能访问的最大内存量是多少?它与系统的最大虚拟内存一样吗 ...

  2. Supervisor-类unix系统下的进程控制工具

    如果你的英文足够好,请看官网的文档:http://supervisord.org/introduction.html 简介: Supervisor 类unix系统下的进程控制工具. 特性: 1.配置简 ...

  3. mac安装jdk1.8

    一. http://www.oracle.com/technetwork/java/javase/downloads/index.html 去jdk官网下载 二.安装 一路傻瓜式安装,下一步下一步 三 ...

  4. 视频H5のVideo标签在微信里的坑和技巧

    随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,前段时间开发了一个以视频为主的移动端 HTML5 ...

  5. python搜索引擎(转)

    用python如何实现一个站内搜索引擎? 先想想搜索引擎的工作流程: 1.网页搜集.用深度或者广度优先的方法搜索某个网站,保存下所有的网页,对于网页的维护采用定期搜集和增量搜集的方式. 2.建立索引库 ...

  6. python3-开发进阶 heapq模块(如何查找最大或最小的N个元素)

    一.怎样从一个集合中获得最大或者最小的 N 个元素列表? heapq 模块有两个函数:nlargest() 和 nsmallest() 可以完美解决这个问题. import heapq nums = ...

  7. [POJ3581]Sequence

    [POJ3581]Sequence 题目大意: 给定序列\(A_{1\sim n}\),其中\(A_1\)为最大的数.要把这个序列分成\(3\)个非空段,并将每一段分别反转,求能得到的字典序最小的序列 ...

  8. Spring MVC 工作流程详解

    1.首先先来一张图 开始流程----------------> 1.用户发送请求到前端控制器,前端控制器会过滤用户的请求,例如我们在web.xml里面配置的内容: <!-- 配置Sprin ...

  9. Codeforces Round #345 (Div. 1) A - Watchmen 容斥

    C. Watchmen 题目连接: http://www.codeforces.com/contest/651/problem/C Description Watchmen are in a dang ...

  10. Android——Activity and Service

    参考博客:http://www.cnblogs.com/newcj/archive/2011/05/30/2061370.html   http://www.cnblogs.com/feisky/ar ...