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 相关文章推荐
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
javascript学习之闭包分析
Dec 02 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
js脚本实现数据去重
Nov 27 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
vue+mock.js实现前后端分离
Jul 24 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 高手之路(三)
2006/10/09 PHP
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
python 文件查找及内容匹配方法
2018/10/25 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
wxpython布局的实现方法
2019/11/01 Python
python中删除某个元素的方法解析
2019/11/05 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
利用Python优雅的登录校园网
2020/10/21 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
详解Canvas事件绑定
2018/06/27 HTML / CSS
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
小车司机岗位职责
2013/11/25 职场文书
会计专业自荐信
2013/12/02 职场文书
会计专业毕业生自荐信范文
2013/12/20 职场文书
销售心得体会
2014/01/02 职场文书
年度评优评先方案
2014/06/03 职场文书
跑操口号
2014/06/12 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python