js實(shí)現(xiàn)簡(jiǎn)單的二級(jí)聯(lián)動(dòng)效果
更新時(shí)間：2017年03月09日 09:50:59 作者：987623616
本文主要介紹了js實(shí)現(xiàn)簡(jiǎn)單的二級(jí)聯(lián)動(dòng)效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧
話不多說，請(qǐng)看代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
window.onload = function () {
// 創(chuàng)建兩個(gè)下拉列表
var sel1 = document.createElement("select");
var sel2 = document.createElement("select");
// 添加到body中
document.body.appendChild(sel1);
document.body.appendChild(sel2);
var arr = ["未選擇","法師", "射手", "輔助", "打野"];
var arr1 = ["卡牌", "魚人", "維克托", "拉克絲"];
var arr2 = ["寒冰", "德萊文", "維恩", "維魯斯"];
var arr3 = ["布里茨", "娜美", "布隆", "錘石"];
var arr4 = ["貝爺", "螳螂", "蠻子", "劍圣"];
function addChild(abj, arr) {
for (var i = 0; i < arr.length; i++) {
// 循環(huán)創(chuàng)建opt元素
var opt = document.createElement("option");
// 設(shè)置option元素的內(nèi)容，內(nèi)容為傳入的數(shù)組內(nèi)容
opt.innerText = arr[i];
// 把option添加到select中
abj.appendChild(opt);
}
}
// 給第一個(gè)下拉列表添加數(shù)據(jù)
addChild(sel1, arr);
// 給第一個(gè)下拉列表添加改變值得方法
sel1.onchange = function () {
remoOpt();
// console.log(sel1.selectedIndex)
switch (sel1.selectedIndex){
case 1:
addChild(sel2,arr1);
break;
case 2:
addChild(sel2,arr2);
break;
case 3:
addChild(sel2,arr3);
break;
case 4:
addChild(sel2,arr4);
break;
}
};
//刪除函數(shù)
function remoOpt() {
for(var i = sel2.children.length-1;i>=0;i--){
sel2.children[i].remove();
}
}
}
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
- AngularJS實(shí)現(xiàn)的select二級(jí)聯(lián)動(dòng)下拉菜單功能示例
- Angularjs實(shí)現(xiàn)下拉框聯(lián)動(dòng)的示例代碼
- JavaScript實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單效果
- 基于BootStrap multiselect.js實(shí)現(xiàn)的下拉框聯(lián)動(dòng)效果
- JS實(shí)現(xiàn)經(jīng)典的中國地區(qū)三級(jí)聯(lián)動(dòng)下拉菜單功能實(shí)例【測(cè)試可用】
- js實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果（簡(jiǎn)單易懂）
- js實(shí)現(xiàn)年月日表單三級(jí)聯(lián)動(dòng)
- JS實(shí)現(xiàn)的五級(jí)聯(lián)動(dòng)菜單效果完整實(shí)例
- JS中使用new Option()實(shí)現(xiàn)時(shí)間聯(lián)動(dòng)效果
相關(guān)文章
uniapp如何手動(dòng)實(shí)現(xiàn)讓input文本框聚焦效果
最近使用uniapp做一個(gè)評(píng)論的功能,遇到一個(gè)需求就是點(diǎn)擊上面的評(píng)論圖標(biāo),讓定位在底部的input框聚焦,下面這篇文章主要給大家介紹了關(guān)于uniapp如何手動(dòng)實(shí)現(xiàn)讓input文本框聚焦效果的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)日歷左右滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
Javascript (ECMA Script)是一種弱類型的語言。這并不意味著它沒有數(shù)據(jù)類型，只是變量或者Javascript對(duì)象屬性不需要一個(gè)特定類型的值分配給它或者它始終使用相同的值。2010-10-10
這篇文章主要介紹了js中如何通過父級(jí)進(jìn)行查找定位元素,需要的朋友可以參考下2014-06-06
JavaScript Perfection kill 測(cè)試及答案
近日，在Perfection kill上看到有關(guān)javascript quiz。并做了一下，最終錯(cuò)了2個(gè)（#2，#9），但是，這2道題，在Ie和ff下的答案是不一樣的？！2010-03-03
js+css實(shí)現(xiàn)文字散開重組動(dòng)畫特效代碼分享
這篇文章主要介紹了js+css實(shí)現(xiàn)文字散開重組動(dòng)畫特效,需要的朋友可以參考下2015-08-08
微信小程序監(jiān)聽用戶登錄事件的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序監(jiān)聽用戶登錄事件的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
JS實(shí)現(xiàn)單行文字不間斷向上滾動(dòng)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)單行文字不間斷向上滾動(dòng)的方法,以實(shí)例形式較為詳細(xì)的分析了文字滾動(dòng)效果實(shí)現(xiàn)的原理與技巧,需要的朋友可以參考下2015-01-01
晚上要下班了老板發(fā)來一個(gè)任務(wù)：把一個(gè)300M左右的視頻壓縮到100M以內(nèi),以便在微信上發(fā)送。于是就是抽空搞了起來，下面小編把過程分享到腳本之家平臺(tái)，需要的朋友參考下吧2018-11-11
本文給大家分享使用js和css3制作的炫酷彈窗效果，整個(gè)背景模糊，要比純色加透明度高大上好多。對(duì)js彈窗效果感興趣的朋友一起學(xué)習(xí)吧2016-11-11