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 事件处理程序介绍
Jun 27 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 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 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
JavaScript 常用函数
2009/12/30 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
python访问类中docstring注释的实现方法
2015/05/04 Python
解读Python编程中的命名空间与作用域
2015/10/16 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
Python中%r和%s的详解及区别
2017/03/16 Python
python程序封装为win32服务的方法
2021/03/07 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
linux下进程间通信的方式
2014/12/23 面试题
几个Linux面试题笔试题
2016/08/01 面试题
实习生工作证明范本
2014/09/14 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
python解析json数据
2022/04/29 Python