今天说的这个是原生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
这样就完成了一个最简单的二级联动，希望可以帮到你们！！！！
