联动下拉菜单

制作时间：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);

此时的效果图是这样的，还没有数据：

1.png

5. 初始化时使第一级菜单的内容显示出来，创建一个 first 方法：

first 方法.png

横线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 方法改进成：

init 方法

1. 将this保存起来，因为在onchange事件中，this改变了，变成了oSel对象。

2. 把 i 赋给 oSel.index ，可以方便控制change函数中的代码。
   比如第一个select触发onchange，那么通过change（1），可以改变索引值为1 ， 即第二个select的内容。

7. 具体的change方法代码：

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，是如下的结果：

2

原因： 在选中 1 后，把 "0_0" 对应的数据 append 上去了。再选中 2 ，又把 "0_1" 的数据也 append 上去了。

解决：在 if(this.data[str]) 中添加 this.aSel[inow].options.length = 1; ,使得每次 append 之前把先前的数据删掉。

9. 问题： 选中第一个select中的 1，第二个select和第三个都显示 “默认”，而不会自动显示第一个元素。如图：

1
添加： this.aSel[inow].options[1].selected = true;
如图： 2

再添加：

inow++;
if(inow < this.aSel.length){
        this.change(inow);
}

如图：

3

联动下拉菜单效果结束

不积跬步无以至千里