原生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 相关文章推荐
禁止js文件缓存的代码
Apr 09 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
JS实现打字游戏
Dec 17 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 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
PHP获取网卡地址的代码
2008/04/09 PHP
PHP加密解密实例分析
2015/12/25 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
Python sys.path详细介绍
2013/10/17 Python
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Python类继承和多态原理解析
2020/02/05 Python
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
super()与this()的区别
2016/01/17 面试题
小学红领巾中秋节广播稿
2014/01/13 职场文书
班组长安全工作职责
2014/07/15 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers