原生js二级联动

今天说的这个是原生js的二级联动，在空白页面里动态添加并作出相对应的效果。 


1 //创建两个下拉列表 select标签 是下拉列表
            var sel = document.createElement("select");
            var sel1 = document.createElement("select");
            //添加到body
            document.body.appendChild(sel);
            document.body.appendChild(sel1);
//            创建一个数组
            var firstSelectArr  = ["未选择","医院","学校","公司","星座"];
            var detailFirstArr  = ["未选择","院长","主任","大夫","护士"];
            var detailSecondArr = ["未选择","校长","老师","学生","主任"];
            var arr2 = ["未选择","CEO","职员","主任","下属"];
            var arr3 = ["未选择","白羊座","射手座","处女座","天秤座"];
            function addChild(arr,parentN){
                //封装函数
                for(var i=0;i<arr.length;i++){
                //创建 option节点
                var opt = document.createElement("option");
                //设置显示文字
                opt.innerText = arr[i];
                //把节点添加到sel中
                parentN.appendChild(opt);
                
            }
            }
            //调用函数 给第一个select添加option
            addChild(firstSelectArr,sel)
            
            //循环创建多个下拉选项
            
            //给第一个下拉列表添加onchange事件
            //onchange事件：当元素的值发生改变时，触发此事件。
            sel.onchange = function (){
//                selectdIndex.下拉列表的索引 
                console.log(sel.selectedIndex);
                 switch (sel.selectedIndex){
                     case 0:
                     alert("未选择");
                     break;
                     case 1:
                     delectOldOpt();
                     addChild(detailFirstArr,sel1);
                     break;
                     case 2:
                     delectOldOpt();
                     addChild(detailSecondArr,sel1);
                     break;
                     case 3:
                     delectOldOpt();
                     addChild(arr2,sel1);
                     break;
                     case 4:
                     delectOldOpt();
                   addChild(arr3,sel1);
                     break;
                 }
                 
                 
                }
            //删除select原来的option
            function delectOldOpt(){
                //到这删除下拉列表中的选项
                for(var i=sel1.childNodes.length-1;i>=0;i--){
                    //删除选项
                    sel1.removeChild(sel1.childNodes[i]);
                }
                
            }
  
　　　　这样就完成了一个最简单的二级联动，希望可以帮到你们！！！！