制作时间：13:30 - 15:30
之前做网站接触过城市二级联动，但也只是从网上copy的一段代码修修剪剪就用了。今天跟着视频自己动手实现了这个迷你效果。不过数据比较不正规，全是数字。
1. 首先建立一个容器：
<div id="box"></div>
2. 因为这种效果比价常用，所以用面向对象的思想编写代码。
创建一个构造函数，并编写原型中的方法。
var s1 = new Sel('box');
function Sel(id){
.........
}
Sel.prototype = {
.........
}
3. 添加数据，所以创建一个add方法：
首先在构造函数中添加语句,创建一个大的json数据：
this.data = {};
然后添加add方法：
Sel.prototype = {
add: function(key,value){
this.data[key] = value;
}
}
调用方法，设置数据格式为json格式：
s1.add('0',['1','2','3']);
s1.add('0_0',['1.1','1.2','1.3']);
s1.add('0_0_0',['1.1.1','1.1.2','1.1.3']);
s1.add('0_0_1',['1.2.1','1.2.2','1.2.3']);
s1.add('0_0_2',['1.3.1','1.3.2','1.3.3']);
s1.add('0_1',['2.1','2.2','2.3']);
s1.add('0_1_0',['2.1.1','2.1.2','2.1.3']);
s1.add('0_1_1',['2.2.1','2.2.2','2.2.3']);
s1.add('0_1_2',['2.3.1','2.3.2','2.3.3']);
s1.add('0_2',['3.1','3.2','3.3']);
s1.add('0_2_0',['3.1.1','3.1.2','3.1.3']);
s1.add('0_2_1',['3.2.1','3.2.2','3.2.3']);
s1.add('0_2_2',['3.3.1','3.3.2','3.3.3']);
4. 创建一个 init 方法
可以设置多选框的个数。这个例子是三级联动，所以设置3个多选框。
init: function(num){
for(var i=1;i<=num;i++){
var oSel = document.createElement("select");
var oPt = document.createElement("option");
oPt.innerHTML = "默认";
oSel.appendChild(oPt);
this.oParent.appendChild(oSel);
}
}
然后在之前调用一下 init 方法。
s1.init(3);
此时的效果图是这样的，还没有数据：
5. 初始化时使第一级菜单的内容显示出来，创建一个 first 方法：
横线1 ：
this.data['0']的数据就是“默认”， “1”，“2”，“3”
横线2 ： 需要将opt元素添加到第一个select上。那么需要先获取到第一个select元素。所以要在构造函数中添加这条语句：
this.aSel = this.oParent.getElementsByTagName("select");
自然而然了， this.aSel[0] 就是第一个select.
最后在 init 初始化方法中调用一下 first 方法：
this.first();
6. 接下去就是将第二个，第三个select与第一个联动起来。
我们在任何一个select中选择时，都会触发onchange事件，所以在刚开始创建3个select的代码时，添加onchange事件。
在这个事件中调用change方法，把select的索引值约当中参数传递过去。
所以 init 方法改进成：
- 将this保存起来，因为在onchange事件中，this改变了，变成了oSel对象。
- 把 i 赋给 oSel.index ，可以方便控制change函数中的代码。
比如第一个select触发onchange，那么通过change（1），可以改变索引值为1 ， 即第二个select的内容。
7. 具体的change方法代码：
分析一下：
假如选择第一个select中的第一个选项“1”，那么就会执行change（1）。
inow = 1
this.aSel[i].selectedIndex -1 = 0
所以 str 就变成 "0_0"
查看之前创建的json数据： s1.add('0_0',['1.1','1.2','1.3'])
通过 var arr = this.data[str]; 获取一下数据“1.1”，“1.2”，“1.3”
通过 for 循环把数据添加到元素中显示。
那为什么要判断 this.data[str] 呢？
因为我们通过 this.aSel[i].selectedIndex -1 获取选中元素的索引值减 1 。如果选中 “默认” ，那么这个值会变为 -1 ，当然也就没有this.data["0_-1"] 的数据了。
所以在这个 else 中，通过 this.aSel[inow].options.length = 1; 将该select的值改为 “ 默认” 。
8. 问题： 先选中第一个select中的1，再选中2.查看第二个select，是如下的结果：
原因： 在选中 1 后，把 "0_0" 对应的数据 append 上去了。再选中 2 ，又把 "0_1" 的数据也 append 上去了。
解决：在 if(this.data[str]) 中添加 this.aSel[inow].options.length = 1; ,使得每次 append 之前把先前的数据删掉。
9. 问题： 选中第一个select中的 1，第二个select和第三个都显示 “默认”，而不会自动显示第一个元素。如图：
添加：
this.aSel[inow].options[1].selected = true;如图：
再添加：
inow++;
if(inow < this.aSel.length){
this.change(inow);
}
如图：
联动下拉菜单效果结束
不积跬步无以至千里
