脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js dom

js中DOM三级列表（代码分享）

 更新时间：2017年03月20日 08:45:25   作者：18301695170  
本篇文章主要介绍了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玩转继承(一)

    最近一直在学Javascript，打算写一些文章，算做自己的学习心得吧，也可以算是学习笔记。没有系统的知识点，太基础的不想写，主要是写一些自己觉得有价值的地方
    2014-05-05
  • 解决Jstree 选中父节点时被禁用的子节点也会选中的问题

    解决Jstree 选中父节点时被禁用的子节点也会选中的问题

    下面小编就为大家分享一篇解决Jstree 选中父节点时被禁用的子节点也会选中的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • 优化 JavaScript 代码的方法小结

    优化 JavaScript 代码的方法小结

    客户端脚本能让你的应用更加地动态和活跃， 但是浏览器对代码的解析可能造成效率问题， 而这种性能差异在客户端之间也不尽相同。 这里我们讨论和给出一些优化你的 JavaScript 代码的提示和最佳实践。
    2009-07-07
  • ES6 class的应用实例分析

    ES6 class的应用实例分析

    这篇文章主要介绍了ES6 class的应用,结合实例形式分析了class在ES6面向对象程序设计中定义类的相关操作技巧,需要的朋友可以参考下
    2019-06-06
  • javaScript合并对象的多种方式及知识扩展

    javaScript合并对象的多种方式及知识扩展

    众所周知JavaScript中有多种方法可以合并对象,下面这篇文章主要给大家介绍了关于javaScript合并对象的多种方式及知识扩展,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • 比较搞笑的js陷阱题

    比较搞笑的js陷阱题

    今天看到一段代码，比较有意思，本周就再多加一问。
    2010-02-02
  • JavaScript最全公共方法汇总并解析（前端开发收藏必备）

    JavaScript最全公共方法汇总并解析（前端开发收藏必备）

    JavaScript掌握各种常用的公共方法更是提升开发效率和代码质量的关键,无论你是初学者还是资深开发者,了解并熟练运用这些方法都能让你的代码更加简洁、高效,本篇博客将为你详细汇总并解析最全的JavaScript公共方法,涵盖数组、对象、字符串、日期等各个方面的常用技巧
    2024-06-06
  • 前端的框架TDesign小程序组件库体验

    前端的框架TDesign小程序组件库体验

    TDesign是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系,下面这篇文章主要给大家介绍了关于前端的框架TDesign小程序组件库体验的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 详解如何通过JavaScript实现函数重载

    详解如何通过JavaScript实现函数重载

    这篇文章主要为大家详细介绍了如何通过JavaScript实现函数重载，文中的示例代码讲解详细，对我们学习JavaScript有一定的帮助，感兴趣的可以了解一下
    2023-01-01
  • 前端HTML实现个人简历信息填写页面效果实例

    前端HTML实现个人简历信息填写页面效果实例

    本文介绍了如何使用HTML、CSS和JavaScript构建一个个人简历信息填写页面,涵盖了简历页面的HTML结构设计、CSS样式美化以及JavaScript实现动态功能和验证的全过程,需要的朋友可以参考下
    2024-11-11

最新评论