原生js二级联动效果


Posted in Javascript onJune 20, 2017

今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果。

//创建两个下拉列表 select标签 是下拉列表
   var sel = document.createElement("select");
   var sel1 = document.createElement("select");
   //添加到body
   document.body.appendChild(sel);
   document.body.appendChild(sel1);
//   创建一个数组
   var firstSelectArr = ["未选择","医院","学校","公司","星座"];
   var detailFirstArr = ["未选择","院长","主任","大夫","护士"];
   var detailSecondArr = ["未选择","校长","老师","学生","主任"];
   var arr2 = ["未选择","CEO","职员","主任","下属"];
   var arr3 = ["未选择","白羊座","射手座","处女座","天秤座"];
   function addChild(arr,parentN){
    //封装函数
    for(var i=0;i<arr.length;i++){
    //创建 option节点
    var opt = document.createElement("option");
    //设置显示文字
    opt.innerText = arr[i];
    //把节点添加到sel中
    parentN.appendChild(opt);
    
   }
   }
   //调用函数 给第一个select添加option
   addChild(firstSelectArr,sel)
   
   //循环创建多个下拉选项
   
   //给第一个下拉列表添加onchange事件
   //onchange事件:当元素的值发生改变时,触发此事件。
   sel.onchange = function (){
//    selectdIndex.下拉列表的索引 
    console.log(sel.selectedIndex);
     switch (sel.selectedIndex){
      case 0:
      alert("未选择");
      break;
      case 1:
      delectOldOpt();
      addChild(detailFirstArr,sel1);
      break;
      case 2:
      delectOldOpt();
      addChild(detailSecondArr,sel1);
      break;
      case 3:
      delectOldOpt();
      addChild(arr2,sel1);
      break;
      case 4:
      delectOldOpt();
     addChild(arr3,sel1);
      break;
     }
     
     
    }
   //删除select原来的option
   function delectOldOpt(){
    //到这删除下拉列表中的选项
    for(var i=sel1.childNodes.length-1;i>=0;i--){
     //删除选项
     sel1.removeChild(sel1.childNodes[i]);
    }
    
   }

这样就完成了一个最简单的二级联动,希望可以帮到你们!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的私有成员
Sep 18 Javascript
javascript 定义初始化数组函数
Sep 07 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
es6 for循环中let和var区别详解
Jan 12 Javascript
angularjs下拉框空白的解决办法
Jun 20 #Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 #Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 #Javascript
详解vue-resource promise兼容性问题
Jun 20 #Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 #Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 #Javascript
vue中如何实现变量和字符串拼接
Jun 19 #Javascript
You might like
YB217、YB235、YB400浅听
2021/03/02 无线电
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
建筑班组长岗位职责
2014/01/02 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
优质服务演讲稿
2014/05/14 职场文书
合作协议书模板
2014/10/10 职场文书
档案接收函格式
2015/01/30 职场文书
公务员个人年终总结
2015/02/12 职场文书
德能勤绩工作总结
2015/08/11 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS