您好,登錄后才能下訂單哦!
今天說的這個是原生js的二級聯動,在空白頁面里動態添加并作出相對應的效果。
//創建兩個下拉列表 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]); } }
這樣就完成了一個最簡單的二級聯動,希望可以幫到你們!
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。