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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
关于ExtJS4.1:快捷键支持的问题
Apr 24 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
vue自定义正在加载动画的例子
Nov 14 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部分常见问题总结
2006/10/09 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
PHP.vs.JAVA
2016/04/29 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
jQuery 表格工具集
2010/04/25 Javascript
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
python实现内存监控系统
2021/03/07 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
新党章心得体会
2014/09/04 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
学习党史心得体会2016
2016/01/23 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
Python制作表白爱心合集
2022/01/22 Python
Golang gRPC HTTP协议转换示例
2022/06/16 Golang