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 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
window.js 主要包含了页面的一些操作
Dec 23 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 Javascript
vue中echarts引入中国地图的案例
Jul 28 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 Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
jQuery 解析xml文件
2009/08/09 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
Python常用模块用法分析
2014/09/08 Python
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
python如何实现内容写在图片上
2018/03/23 Python
PyQt5实现简易计算器
2020/05/30 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
python 19个值得学习的编程技巧
2020/08/15 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
预备党员综合考察材料
2014/05/31 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
初中军训感言
2015/08/01 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python