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多线程的实现方法
May 08 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
vue 实现特定条件下绑定事件
Nov 09 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
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
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
简单的PHP留言本实例代码
2010/05/09 PHP
php返回json数据函数实例
2014/10/09 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
关于js datetime的那点事
2011/11/15 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
js验证上传图片的方法
2015/05/12 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
Python3.2中Print函数用法实例详解
2015/05/19 Python
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
python使用turtle绘制分形树
2018/06/22 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
化学教师自荐信范文
2013/12/28 职场文书
邮政员工辞职信
2014/01/16 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
保研导师推荐信
2015/03/25 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技
Golang入门之计时器
2022/05/04 Golang