原生js二級聯(lián)動效果
更新時間:2017年06月20日 08:47:17 作者:Code_User
這篇文章主要為大家詳細介紹了原生js二級聯(lián)動效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
今天說的這個是原生js的二級聯(lián)動,在空白頁面里動態(tài)添加并作出相對應(yīng)的效果。
//創(chuàng)建兩個下拉列表 select標簽 是下拉列表
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ī)院","學校","公司","星座"];
var detailSecondArr = ["未選擇","校長","老師","學生","主任"];
var arr2 = ["未選擇","CEO","職員","主任","下屬"];
var arr3 = ["未選擇","白羊座","射手座","天秤座"];
function addChild(arr,parentN){
//封裝函數(shù)
for(var i=0;i<arr.length;i++){
//創(chuàng)建 option節(jié)點
var opt = document.createElement("option");
//設(shè)置顯示文字
opt.innerText = arr[i];
//把節(jié)點添加到sel中
parentN.appendChild(opt);
}
}
//調(diào)用函數(shù) 給第一個select添加option
addChild(firstSelectArr,sel)
//循環(huán)創(chuàng)建多個下拉選項
//給第一個下拉列表添加onchange事件
//onchange事件:當元素的值發(fā)生改變時,觸發(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(){
//到這刪除下拉列表中的選項
for(var i=sel1.childNodes.length-1;i>=0;i--){
//刪除選項
sel1.removeChild(sel1.childNodes[i]);
}
}這樣就完成了一個最簡單的二級聯(lián)動,希望可以幫到你們!
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js下利用userData實現(xiàn)客戶端保存表單數(shù)據(jù)
對于多數(shù)網(wǎng)頁制作的朋友,實現(xiàn)在客戶端保存在網(wǎng)頁表單上的信息,比較多的是采用Cookie技術(shù)來實現(xiàn),這些功能例如:下拉列表框選擇的選項,文本框輸入的數(shù)據(jù)等。2010-06-06
uniapp開發(fā)H5打包微信小程序樣式失效的完美解決方法
本文主要介紹了在使用uniapp開發(fā)H5頁面并打包成微信小程序時,可能會出現(xiàn)樣式失效的問題,并提供了解決方法,通過本文的學習,讀者可以了解uniapp開發(fā)H5頁面打包成微信小程序的注意事項,避免出現(xiàn)樣式失效等問題2023-03-03

