原生js二级联动

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


1 //创建两个下拉列表 select标签 是下拉列表
 2             var sel = document.createElement("select");
 3             var sel1 = document.createElement("select");
 4             //添加到body
 5             document.body.appendChild(sel);
 6             document.body.appendChild(sel1);
 7 //            创建一个数组
 8             var firstSelectArr  = ["未选择","医院","学校","公司","星座"];
 9             var detailFirstArr  = ["未选择","院长","主任","大夫","护士"];
10             var detailSecondArr = ["未选择","校长","老师","学生","主任"];
11             var arr2 = ["未选择","CEO","职员","主任","下属"];
12             var arr3 = ["未选择","白羊座","射手座","处女座","天秤座"];
13             function addChild(arr,parentN){
14                 //封装函数
15                 for(var i=0;i<arr.length;i++){
16                 //创建 option节点
17                 var opt = document.createElement("option");
18                 //设置显示文字
19                 opt.innerText = arr[i];
20                 //把节点添加到sel中
21                 parentN.appendChild(opt);
22                 
23             }
24             }
25             //调用函数 给第一个select添加option
26             addChild(firstSelectArr,sel)
27             
28             //循环创建多个下拉选项
29             
30             //给第一个下拉列表添加onchange事件
31             //onchange事件：当元素的值发生改变时，触发此事件。
32             sel.onchange = function (){
33 //                selectdIndex.下拉列表的索引 
34                 console.log(sel.selectedIndex);
35                  switch (sel.selectedIndex){
36                      case 0:
37                      alert("未选择");
38                      break;
39                      case 1:
40                      delectOldOpt();
41                      addChild(detailFirstArr,sel1);
42                      break;
43                      case 2:
44                      delectOldOpt();
45                      addChild(detailSecondArr,sel1);
46                      break;
47                      case 3:
48                      delectOldOpt();
49                      addChild(arr2,sel1);
50                      break;
51                      case 4:
52                      delectOldOpt();
53                    addChild(arr3,sel1);
54                      break;
55                  }
56                  
57                  
58                 }
59             //删除select原来的option
60             function delectOldOpt(){
61                 //到这删除下拉列表中的选项
62                 for(var i=sel1.childNodes.length-1;i>=0;i--){
63                     //删除选项
64                     sel1.removeChild(sel1.childNodes[i]);
65                 }
66                 
67             }
68   
　　　　这样就完成了一个最简单的二级联动，希望可以帮到你们！！！！

 

转载于:https://www.cnblogs.com/user-5253/p/7050682.html