JS学习之实现简单的二级联动

一：多级联动在开发中使用的十分频繁，总结一下其主要步骤：

1、找到绑定onchange（）的标签

1.1、创建一个合适的数组（开发过程中用数据库）存储需要的数据

2、以适当的方式传参

3、JS层要找到相应的标签，同时用层层包裹的形式给第二、三等等等标签赋值。

4、最后要进行清空处理

二：demo实现

html代码：

 

            姓名--兴趣爱好     
            <!-- //下面为第一级列表绑定onchange事件，同时传参此时用this.value方法 -->
            <select onchange="Cname(this.value)">
                <option>--请下拉选择--</option>
                <option value="0">张三</option>
                <option value="1">李四</option>s
            </select>
            <select id="hobby">
            </select>

 

 

JS代码：

 

            //定义一个二维数组用来存储第二级的列表信息
            var stus = new Array();
            stus[0] = new Array("唱", "跳", "rap");
            stus[1] = new Array("足球", "篮球", "羽毛球");
            //实现onchange事件
            function Cname(val) {
                //找到第二级的列表id
                var hobby = document.getElementById("hobby");
                //每次调用onchange事件的时候要清空第二级的列表内容,否则会出现内容错乱
                hobby.options.length = 0;

                for (var i = 0; i < stus.length; i++) {
                    //将第一级的下标与数组第一级的下标进行对比
                    if (val == i) {
                        //找到对应下标后进行赋值操作
                        for (var j = 0; j < stus[i].length; j++) {
                            //创建一个文本节点,用来存储列表第二级的内容,实际开发应该是用数据库存储
                            var textNode = document.createTextNode(stus[i][j]);
                            //创建一个标签节点
                            var opEle = document.createElement("option");
                            //将标签节点包裹文本节点
                            opEle.appendChild(textNode);
                            //将第二级父节点包裹标签子节点
                            hobby.appendChild(opEle);
                        }
                    }
                }
            }