原生js二級聯(lián)動效果
更新時(shí)間:2017年06月20日 08:47:17 作者:Code_User
這篇文章主要為大家詳細(xì)介紹了原生js二級聯(lián)動效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
今天說的這個是原生js的二級聯(lián)動,在空白頁面里動態(tài)添加并作出相對應(yīng)的效果。
//創(chuàng)建兩個下拉列表 select標(biāo)簽 是下拉列表
var sel = document.createElement("select");
var sel1 = document.createElement("select");
//添加到body
document.body.appendChild(sel);
document.body.appendChild(sel1);
// 創(chuàng)建一個數(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ù) 給第一個select添加option
addChild(firstSelectArr,sel)
//循環(huán)創(chuàng)建多個下拉選項(xiàng)
//給第一個下拉列表添加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]);
}
}這樣就完成了一個最簡單的二級聯(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-06
uniapp開發(fā)H5打包微信小程序樣式失效的完美解決方法
本文主要介紹了在使用uniapp開發(fā)H5頁面并打包成微信小程序時(shí),可能會出現(xiàn)樣式失效的問題,并提供了解決方法,通過本文的學(xué)習(xí),讀者可以了解uniapp開發(fā)H5頁面打包成微信小程序的注意事項(xiàng),避免出現(xiàn)樣式失效等問題2023-03-03
JavaScript獲取時(shí)間戳的方法總結(jié)
JavaScript獲得時(shí)間戳的方法有五種,后四種都是通過實(shí)例化時(shí)間對象new Date() 來進(jìn)一步獲取當(dāng)前的時(shí)間戳,下面我們就一起學(xué)習(xí)一下具體獲取的方法吧2023-09-09

