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 相关文章推荐
用JQuery调用Session的实现代码
Oct 29 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
javascript实现下雨效果
Mar 27 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
B2K与车机的中波PK
2021/03/02 无线电
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
php分页函数完整实例代码
2014/09/22 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
土地转让协议书
2014/04/15 职场文书
团队精神口号
2014/06/06 职场文书
项目经理任命书内容
2014/06/06 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书