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

 更新时间:2017年03月09日 09:50:59   作者:987623616  
本文主要介绍了js实现简单的二级联动效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧

话不多说,请看代码:

<!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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

相关文章

  • javascript &&和||运算法的另类使用技巧

    javascript &&和||运算法的另类使用技巧

    一直以为 && 和 || 这两个伟大的运算法只能在判断表达式使用,也就是常在if语句使用,原来错了,它还可以运用在简化选择性执行语句的操作,有点拗口,简单点也就是:操作执行某条语句,不执行某条语句。
    2009-11-11
  • Ajax 加载数据 练习代码

    Ajax 加载数据 练习代码

    这篇文章主要介绍了Ajax 加载数据,主要是为了查询表的显示,不用嵌入php通过ajax调用,现在手机端的更多显示功能都是通过ajax实现的
    2017-01-01
  • 使用JavaScript动态设置样式实现代码及演示动画

    使用JavaScript动态设置样式实现代码及演示动画

    使用onmouseover和onmouseout事件实现不同的效果而且是使用js动态实现,本文有利于巩固你js与css方面的知识,感兴趣的你可以了解下哦,希望本文对你有所帮助
    2013-01-01
  • JavaScript按位运算符的应用简析

    JavaScript按位运算符的应用简析

    下面根据自己的认知简单的谈一下js中的位操作使用(同样适用于其他语言),如果有错误,欢迎指正
    2014-02-02
  • 详解JavaScript中的闭包是如何产生的

    详解JavaScript中的闭包是如何产生的

    这篇文章主要为大家详细介绍了从内存管理的角度来看,JavaScript中的闭包是如何产生的。文中的示例代码简洁易懂,感兴趣的小伙伴可以了解一下
    2022-12-12
  • js中的for如何实现foreach中的遍历

    js中的for如何实现foreach中的遍历

    js中没有foreach这个关键字,但是可以用var v in array来实现遍历,下面有个不错的示例,大家可以参考下
    2014-05-05
  • Javascript load Page,load css,load js实现代码

    Javascript load Page,load css,load js实现代码

    通过js动态载入页面和css或js的实现代码,需要的朋友可以参考下。国外人写的,可以参考下。
    2010-03-03
  • 浅析js中的every()对空数组总返回true

    浅析js中的every()对空数组总返回true

    JavaScript 语言的核心部分足够大,以至于我们很容易误解其某些部分的工作方式,本文就来和大家一起讨论下为什么JS中的 every()对空数组总返回 true,需要的可以参考下
    2023-09-09
  • 在layui中select更改后生效的方法

    在layui中select更改后生效的方法

    今天小编就为大家分享一篇在layui中select更改后生效的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS正则替换去空格的方法

    JS正则替换去空格的方法

    这篇文章主要介绍了JS正则替换去空格的方法,结合实例形式对比分析了针对全角与半角空格的删除技巧,涉及replace正则替换的使用方法,需要的朋友可以参考下
    2017-03-03

最新评论