2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级
原生js二级联动
js二级联动作者:猿2048志愿者
今天说的这个是原生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
    这样就完成了一个最简单的二级联动,希望可以帮到你们!!!!

 

评论
点击刷新
评论
×添加代码片段