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


Posted in Javascript onMarch 09, 2017

话不多说,请看代码:

<!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 Sort 表格排序
Oct 31 Javascript
JavaScript关于select的相关操作说明
Jan 13 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
jquery表单提交带错误信息提示效果
Mar 09 #Javascript
AngularJS 防止页面闪烁的方法
Mar 09 #Javascript
js读取json文件片段中的数据实例
Mar 09 #Javascript
JavaScript实现动态增删表格的方法
Mar 09 #Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 #Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 #Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 #Javascript
You might like
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
javascript 常用关键字列表集合
2007/12/04 Javascript
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
Pycharm github配置实现过程图解
2020/10/13 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
平面设计的岗位职责
2013/11/08 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
支教个人总结
2015/03/04 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
学术会议开幕词
2016/03/03 职场文书
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python
Python加密技术之RSA加密解密的实现
2022/04/08 Python