JavaScript结合HTML DOM实现联动菜单

2019-11-19 16:55:13

字体：大中小

来源：转载

供稿：网友

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

效果图：

代码：

<!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>

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

上一篇：JS实现的二叉树算法完整实例

下一篇：js实现按座位号抽奖