原生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 相关文章推荐
jquery $.ajax入门应用一
Nov 19 Javascript
node.js中的favicon.ico请求问题处理
Dec 15 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
判断js数据类型的函数实例详解
May 23 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本地服务器分享
2013/02/19 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
python操作日期和时间的方法
2014/03/11 Python
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
python selenium循环登陆网站的实现
2019/11/04 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
客房主管岗位职责
2013/12/09 职场文书
特色冷饮店创业计划书
2014/01/28 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
总结Python变量的相关知识
2021/06/28 Python
django 认证类配置实现
2021/11/11 Python
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle