联动下拉菜单demo

Posted 2020-09-05

效果图：

 

 

 

 

 

注意点：

json中的key必须有规律可寻；

面向对象的方式去完成。构造函数对每一个小功能的结合；

  //面向对象方式
        window.onload = function() {
            var s1 = new Sel("div1");
            //数据加载  key值有规律
            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", "31_2_2", "3_2_3"]) //三级
            s1.add("0_2_2", ["3_3_1", "3_3_2", "3_3_3"]) //三级

            s1.init(3);
        }
        //创建构造函数
        function Sel(id) {
            this.oParent = document.getElementById(id);
            this.data = {};
            //全局属性 方法下获取所有select
            this.aSel = this.oParent.getElementsByTagName("select");

        }
        //用json key    value属性关联起来
        Sel.prototype = {
            //初始化
            init: function(num) {
                var This = this; //改变this指向  由osel对象 指向 下拉菜单;
                for (var i = 1; i <= num; i++) {
                    var oSel = document.createElement("select");
                    var oPt = document.createElement("option");
                    oPt.innerhtml = ‘默认‘;
                    oSel.index = i; //增加索引
                    oSel.appendChild(oPt);
                    this.oParent.appendChild(oSel);
                    //onchange事件改变的时候  第二个下拉菜单才改变
                    oSel.onchange = function() {
                        This.change(this.index);
                    }
                }
                //默认第一个下拉菜单
                this.first();
            },
            add: function(key, value) {
                this.data[key] = value;
            },
            //根据数组数据的多少来创建子项
            first: function() {
                var arr = this.data[0];
                for (var i = 0; i < arr.length; i++) {
                    var oPt = document.createElement("option");
                    oPt.innerHTML = arr[i]; //接下去添加第一个下拉菜单
                    this.aSel[0].appendChild(oPt);
                }
            },
            change: function(iNow) {
                //当传1 表示 第一个下拉菜单  传2 表示第二个下拉菜单
                var str = "0";
                //当传入1的时候要改变第二项内容的值。以此类推
                for (var i = 0; i < iNow; i++) {
                    //alert(this.aSel[i].selectedIndex)
                    str += "_" + (this.aSel[i].selectedIndex - 1);
                    console.log(this.data[str]);
                }
                if (!!this.data[str]) {
                    var arr = this.data[str];
                    this.aSel[iNow].length = 1; //只能一组存在 其他删除
                    for (var i = 0; i < arr.length; i++) {
                        var oPt = document.createElement("option");
                        oPt.innerHTML = arr[i]; //接下去添加第一个下拉菜单
                        this.aSel[iNow].appendChild(oPt);
                        //为什么是inow 不是 str str是 0_1 inow是数字
                    }
                    //默认下拉第一个框 使得第二个框跳过“默认”自动变为数据；
                    this.aSel[iNow].options[1].selected = true;
                    iNow++;
                    if (iNow < this.aSel.length) {
                        this.change(iNow);
                    }

                } else {
                    if (this.aSel[0].selectedIndex == 0) {
                        if (iNow < this.aSel.length) {
                            this.aSel[iNow].options.length = 1;
                            this.aSel[iNow + 1].options.length = 1;
                        }
                    } else {
                        if (iNow < this.aSel.length) {
                            this.aSel[iNow].options.length = 1;
                        }
                    }


                }
            }

        }