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 相关文章推荐
5个javascript的数字格式化函数分享
Dec 07 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
layui select动态添加option的实例
Mar 07 Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 Javascript
javascript设计模式之迭代器模式
Jan 30 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中include()与require()的区别说明
2010/03/10 PHP
基于php伪静态的实现详细介绍
2013/04/28 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
对Python中内置异常层次结构详解
2018/10/18 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
python 用struct模块解决黏包问题
2020/11/07 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
检查接待方案
2014/02/27 职场文书
通信工程求职信
2014/07/16 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
2015年外联部工作总结
2015/04/03 职场文书
导游词之丽江普济寺
2019/10/22 职场文书