js实现简单的二级联动效果

2019-11-19 17:13:36

字体：大中小

来源：转载

供稿：网友

话不多说，请看代码：

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title></head><body><script>  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();      }    }  }</script></body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】

下一篇：jquery表单提交带错误信息提示效果