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