原生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 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 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类的使用 实例代码讲解
2009/12/28 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
Angular工具方法学习
2016/12/26 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
python中reload(module)的用法示例详解
2017/09/15 Python
python web基础之加载静态文件实例
2018/03/20 Python
分分钟入门python语言
2018/03/20 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
django2.0扩展用户字段示例
2019/02/13 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
夜班门卫岗位职责
2013/12/09 职场文书
考试没考好检讨书
2014/01/31 职场文书
迎国庆横幅标语
2014/10/08 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
民事答辩状范本
2015/05/21 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书