原生js二級聯(lián)動效果
更新時(shí)間:2017年06月20日 08:47:17 作者:Code_User
這篇文章主要為大家詳細(xì)介紹了原生js二級聯(lián)動效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
今天說的這個(gè)是原生js的二級聯(lián)動,在空白頁面里動態(tài)添加并作出相對應(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 detailSecondArr = ["未選擇","校長","老師","學(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原來的option function delectOldOpt(){ //到這刪除下拉列表中的選項(xiàng) for(var i=sel1.childNodes.length-1;i>=0;i--){ //刪除選項(xiàng) sel1.removeChild(sel1.childNodes[i]); } }
這樣就完成了一個(gè)最簡單的二級聯(lián)動,希望可以幫到你們!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js下利用userData實(shí)現(xiàn)客戶端保存表單數(shù)據(jù)
對于多數(shù)網(wǎng)頁制作的朋友,實(shí)現(xiàn)在客戶端保存在網(wǎng)頁表單上的信息,比較多的是采用Cookie技術(shù)來實(shí)現(xiàn),這些功能例如:下拉列表框選擇的選項(xiàng),文本框輸入的數(shù)據(jù)等。2010-06-06uniapp開發(fā)H5打包微信小程序樣式失效的完美解決方法
本文主要介紹了在使用uniapp開發(fā)H5頁面并打包成微信小程序時(shí),可能會出現(xiàn)樣式失效的問題,并提供了解決方法,通過本文的學(xué)習(xí),讀者可以了解uniapp開發(fā)H5頁面打包成微信小程序的注意事項(xiàng),避免出現(xiàn)樣式失效等問題2023-03-03JavaScript獲取時(shí)間戳的方法總結(jié)
JavaScript獲得時(shí)間戳的方法有五種,后四種都是通過實(shí)例化時(shí)間對象new Date() 來進(jìn)一步獲取當(dāng)前的時(shí)間戳,下面我們就一起學(xué)習(xí)一下具體獲取的方法吧2023-09-09