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 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 Javascript
JavaScript实现alert弹框效果
Nov 19 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笔记之常用文件操作
2010/10/12 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
js每次Title显示不同的名言
2008/09/25 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
python 实现归并排序算法
2012/06/05 Python
Python实现比较两个列表(list)范围
2015/06/12 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
python 搜索大文件的实例代码
2019/07/08 Python
python numpy 反转 reverse示例
2019/12/04 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
销售副总经理岗位职责
2013/12/11 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
商务考察邀请函模板
2015/02/02 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers