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的类型简单说明
Sep 03 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
JS中的函数与对象的创建方式
May 12 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
vue实现商城秒杀倒计时功能
Dec 12 Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 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 xml文件操作实现代码(二)
2009/03/20 PHP
奇怪的PHP引用效率问题分析
2012/03/23 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
jquery提示效果实例分析
2014/11/25 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
django框架如何集成celery进行开发
2017/05/24 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
python构建深度神经网络(续)
2018/03/10 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
毕业生自我鉴定实例
2014/01/21 职场文书
企业管理培训感言
2014/01/27 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
鸡毛信观后感
2015/06/11 职场文书
董事长致辞
2015/07/29 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS