原生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]);
                 }

             }
   
　　　　这样就完成了一个最简单的二级联动，希望可以帮到你们！！！！