欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JavaScript结合HTML DOM实现联动菜单

程序员文章站 2023-10-28 17:16:10
本文实例为大家分享了js三级联动菜单展示的具体代码，供大家参考，具体内容如下 效果图： 代码：

本文实例为大家分享了js三级联动菜单展示的具体代码，供大家参考，具体内容如下

效果图：

JavaScript结合HTML DOM实现联动菜单

代码：

<!doctype html>
<html>
<head>
<title>联动菜单</title>
<meta charset="utf-8" />
<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":'手套'}
  ]}
];
   
</script>
</head>
<body>
  <div id="category"></div>
 <script>
  //查找id为category的div保存在div中
   var div=document.getelementbyid("category");
  //定义函数createselect,接收一个数组参数arr
  function createselect(arr){
   //创建一个select
   var sel=document.createelement("select");
   //创建一个option，设置其内容为"-请选择-"，值为-1,将option添加到select中
    sel.add(new option("--请选择--",-1));
   //遍历arr
   for(var i=0;i<arr.length;i++){
    //创建一个option，设置内容为当前元素的name属性，设置value为当前元素的id属性，将新option添加到select中
    sel.add(new option(arr[i].name,arr[i].id));   
   }//(遍历结束)
   //为sel绑定onchange事件
   sel.onchange=function(){
    //反复:只要当前select不是div的lastchild
    while(this!=div.lastchild)
     //让div删除其lastchild
      div.removechild(div.lastchild);
    //获得当前选中项的下表-1，保存在i中
    var i=this.selectedindex-1;
    //如果arr中i位置的商品类别有children
     if(i>=0&&arr[i].children!==undefined)
     //用arr中i位置的商品类别的children数组创建下一个select
     createselect(arr[i].children);
    
   }
   //将select添加到div中
    div.appendchild(sel);
  }
  createselect(categories);
 </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： 你个混账东西

下一篇： ADSL和小区宽带(FTTX+LAN)接入方式比较

推荐阅读