js中DOM三级列表(代码分享)


Posted in Javascript onMarch 20, 2017

效果图:

js中DOM三级列表(代码分享)

代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>联动菜单</title>
<meta charset="utf-8" />
</head>
<body>
 <div id="category"></div>
 <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":'手套'}
]}
];
 (function(arr){
 var select=//创建select
 document.createElement("select");
 //将opt追加到select中
 select.add(new Option("-请选择-",-1));
 //遍历arr中每个商品类别对象
 for(var i=0;i<arr.length;i++){
 //将option追加到select中
 select.add(
 new Option(arr[i].name,arr[i].id)
 );
 }
 var fun=arguments.callee;
 //为select绑定onchange事件:
 select.onchange=function(){
 //this->.前的元素对象
 //获得this的parent,保存在变量parent中
 var parent=this.parentNode;
 //反复:只要this不是parent的最后一个子节点
 while(this!=parent.lastChild){
 //删除parent下的最后一个子节点
 parent.removeChild(parent.lastChild);
 }
 //获得当前select选中项的下标i
 var i=this.selectedIndex;
 if(i>0){//如果i>0
 //获得arr中i-1位置的商品类别对象的children,保存在变量subCate
 var subCate=arr[i-1].children;
 //调用fun(subCate)
 subCate!==undefined&&fun(subCate);
 }
 }
 //将select追加到id为category的父元素下
 document.getElementById("category")
 .appendChild(select);
 })(categories);
 </script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
深入对Vue.js $watch方法的理解
Mar 20 #Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 #Javascript
js获取当前周、上一周、下一周日期
Mar 19 #Javascript
浅析bootstrap原理及优缺点
Mar 19 #Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 #Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 #Javascript
JavaScript数据结构之链表的实现
Mar 19 #Javascript
You might like
PHP goto语句简介和使用实例
2014/03/11 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
举例讲解Python中的算数运算符的用法
2015/05/13 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
OpenCV+Python识别车牌和字符分割的实现
2019/01/31 Python
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
大学生优秀的自我评价分享
2013/10/22 职场文书
学院领导推荐信
2013/10/30 职场文书
工程建设实施方案
2014/03/14 职场文书
文明城市标语
2014/06/16 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
行政处罚听证告知书
2015/07/01 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python
Python实现排序方法常见的四种
2021/07/15 Python
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server