JavaScript结合HTML DOM实现联动菜单


Posted in Javascript onApril 05, 2017

本文实例为大家分享了js三级联动菜单展示的具体代码,供大家参考,具体内容如下

效果图:

JavaScript结合HTML DOM实现联动菜单

代码:

<!DOCTYPE HTML>
<html>
<head>
<title>联动菜单</title>
<meta charset="utf-8" />
<script>
  /*使用 HTML DOM 的方式实现联动菜单*/
  var categories=[
  {
   "id":10,
   "name":'男装',
   "children":[
    {"id":101,"name":'正装'},
    {"id":102,"name":'T恤'},
    {"id":103,"name":'裤衩'}
   ]
  },
  {
   "id":20,
   "name":'女装',
   "children":[
    {"id":201,"name":'短裙'},
    {"id":202,"name":'连衣裙'},
    {
     "id":203,
     "name":'裤子',
     "children": [
      {"id":2031,"name":'长裤'},
      {"id":2031,"name":'九分裤'},
      {"id":2031,"name":'七分裤'}
     ]
    },
   ]
  },
  {"id":30,"name":'童装',"children":[
   {"id":301,"name":'帽子'},
   {"id":302,"name":'套装',"children":[
    {"id":3021,"name":"0-3岁"},
    {"id":3021,"name":"3-6岁"},
    {"id":3021,"name":"6-9岁"},
    {"id":3021,"name":"9-12岁"}
   ]},
   {"id":303,"name":'手套'}
  ]}
];
   
</script>
</head>
<body>
  <div id="category"></div>
 <script>
  //查找id为category的div保存在div中
   var div=document.getElementById("category");
  //定义函数createSelect,接收一个数组参数arr
  function createSelect(arr){
   //创建一个select
   var sel=document.createElement("select");
   //创建一个option,设置其内容为"-请选择-",值为-1,将option添加到select中
    sel.add(new Option("--请选择--",-1));
   //遍历arr
   for(var i=0;i<arr.length;i++){
    //创建一个option,设置内容为当前元素的name属性,设置value为当前元素的id属性,将新option添加到select中
    sel.add(new Option(arr[i].name,arr[i].id));   
   }//(遍历结束)
   //为sel绑定onchange事件
   sel.onchange=function(){
    //反复:只要当前select不是div的lastChild
    while(this!=div.lastChild)
     //让div删除其lastChild
      div.removeChild(div.lastChild);
    //获得当前选中项的下表-1,保存在i中
    var i=this.selectedIndex-1;
    //如果arr中i位置的商品类别有children
     if(i>=0&&arr[i].children!==undefined)
     //用arr中i位置的商品类别的children数组创建下一个select
     createSelect(arr[i].children);
    
   }
   //将select添加到div中
    div.appendChild(sel);
  }
  createSelect(categories);
 </script>
</body>
</html>

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

Javascript 相关文章推荐
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
JS实现简单拖拽效果
Jun 21 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 Javascript
js实现按座位号抽奖
Apr 05 #Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 #Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 #Javascript
微信小程序 页面跳转如何实现传值
Apr 05 #Javascript
微信小程序 数据遍历的实现
Apr 05 #Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 #Javascript
JS实现复选框的全选和批量删除功能
Apr 05 #Javascript
You might like
杏林同学录(二)
2006/10/09 PHP
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
js实现随机点名功能
2020/12/23 Javascript
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
Python中and和or如何使用
2020/05/28 Python
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
文体活动总结范文
2014/05/05 职场文书
十佳护士先进事迹
2014/05/08 职场文书
学生违纪检讨书200字
2014/10/21 职场文书