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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
Mootools 1.2教程 Tooltips
Sep 15 Javascript
Javascript学习笔记2 函数
Jan 11 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
js 操作符汇总
Nov 08 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 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中将数组转成XML格式的实现代码
2011/08/08 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
Python json转字典字符方法实例解析
2020/04/13 Python
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
父亲八十大寿答谢词
2014/01/23 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
公司停电通知
2015/04/15 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
提档介绍信范文
2015/10/22 职场文书