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 document.referrer 用法
Apr 30 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 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 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
浅析SVN常见问题及解决方法
2013/06/21 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
php查询及多条件查询
2017/02/26 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
删除重复数据的算法
2006/11/23 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
Python类属性与实例属性用法分析
2015/05/09 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
聊聊python中的循环遍历
2020/09/07 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
高中生毕业学习总结的自我评价
2013/11/14 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
在职证明范本
2015/06/15 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL