html二级联动带变量,js实现简单的二级联动效果

window.onload = function () {

// 创建两个下拉列表

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++) {

// 循环创建opt元素

var opt = document.createElement("option");

// 设置option元素的内容，内容为传入的数组内容

opt.innerText = arr[i];

// 把option添加到select中

abj.appendChild(opt);

}

}

// 给第一个下拉列表添加数据

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;

}

};

//删除函数

function remoOpt() {

for(var i = sel2.children.length-1;i>=0;i--){

sel2.children[i].remove();

}

}

}