原生js二級聯動

本文轉載於:猿2048網站➤原生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   　　　　這樣就完成了一個最簡單的二級聯動，但願能夠幫到大家！！！！