今天說(shuō)的這個(gè)是原生js的二級(jí)聯(lián)動(dòng)，在空白頁(yè)面里動(dòng)態(tài)添加并作出相對(duì)應(yīng)的效果。

//創(chuàng)建兩個(gè)下拉列表 select標(biāo)簽 是下拉列表   var sel = document.createElement("select");   var sel1 = document.createElement("select");   //添加到body   document.body.appendChild(sel);   document.body.appendChild(sel1);//   創(chuàng)建一個(gè)數(shù)組   var firstSelectArr = ["未選擇","醫(yī)院","學(xué)校","公司","星座"];   var detailFirstArr = ["未選擇","院長(zhǎng)","主任","大夫","護(hù)士"];   var detailSecondArr = ["未選擇","校長(zhǎng)","老師","學(xué)生","主任"];   var arr2 = ["未選擇","CEO","職員","主任","下屬"];   var arr3 = ["未選擇","白羊座","射手座","處女座","天秤座"];   function addChild(arr,parentN){    //封裝函數(shù)    for(var i=0;i<arr.length;i++){    //創(chuàng)建 option節(jié)點(diǎn)    var opt = document.createElement("option");    //設(shè)置顯示文字    opt.innerText = arr[i];    //把節(jié)點(diǎn)添加到sel中    parentN.appendChild(opt);       }   }   //調(diào)用函數(shù) 給第一個(gè)select添加option   addChild(firstSelectArr,sel)      //循環(huán)創(chuàng)建多個(gè)下拉選項(xiàng)      //給第一個(gè)下拉列表添加onchange事件   //onchange事件：當(dāng)元素的值發(fā)生改變時(shí)，觸發(fā)此事件。   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原來(lái)的option   function delectOldOpt(){    //到這刪除下拉列表中的選項(xiàng)    for(var i=sel1.childNodes.length-1;i>=0;i--){     //刪除選項(xiàng)     sel1.removeChild(sel1.childNodes[i]);    }       }

這樣就完成了一個(gè)最簡(jiǎn)單的二級(jí)聯(lián)動(dòng)，希望可以幫到你們！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長(zhǎng)站。