JavaScript结合HTML DOM实现联动菜单

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

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

# HTML # DOM # 联动菜单 # JSON+HTML实现国家省市联动选择效果 # js简单实现HTML标签Select联动带跳转 # PHP+Mysql+Ajax+JS实现省市区三级联动 # JS实多级联动下拉菜单类 # 简单实现省市区联动菜单！ # js实现的全国省市二级联动下拉选择菜单完整实例 # 最好用的二级联动原生js实现你值得拥有 # jquery+json 通用三级联动下拉列表 # js操作二级联动实现代码 # JS制作简单的三级联动 # 基于jquery & json的省市区联动代码 # 创建一个 # 遍历 # 请选择 # 大家分享 # 绑定 # 具体内容 # 值为 # 大家多多 # 下表 # 七分裤 # script # utf # title # head # charset # meta # var # children # categories

返回目录在线咨询

上一篇：如何通过微信电影站建站系统优化网站SEO，提高搜索排名？
下一篇：NumPy数组高效条件筛选：告别循环与append，拥抱向量化操作

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

JavaScript结合HTML DOM实现联动菜单

您的项目需求