DDR爱好者之家

JavaScript结合HTML DOM实现联动菜单
站长资源 2024/11/27 佚名
52 1538
DDR爱好者之家 Design By 杰米

本文实例为大家分享了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>

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米