JavaScript結合HTML DOM實現(xiàn)聯(lián)動菜單

更新時間：2017年04月05日 17:31:53 作者：Harlem

這篇文章主要為大家詳細介紹了JavaScript結合HTML DOM實現(xiàn)聯(lián)動菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js三級聯(lián)動菜單展示的具體代碼，供大家參考，具體內容如下

效果圖：

代碼：

<!DOCTYPE HTML>
<html>
<head>
<title>聯(lián)動菜單</title>
<meta charset="utf-8" />
<script>
  /*使用 HTML DOM 的方式實現(xiàn)聯(lián)動菜單*/
  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");
  //定義函數(shù)createSelect,接收一個數(shù)組參數(shù)arr
  function createSelect(arr){
   //創(chuàng)建一個select
   var sel=document.createElement("select");
   //創(chuàng)建一個option，設置其內容為"-請選擇-"，值為-1,將option添加到select中
    sel.add(new Option("--請選擇--",-1));
   //遍歷arr
   for(var i=0;i<arr.length;i++){
    //創(chuàng)建一個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數(shù)組創(chuàng)建下一個select
     createSelect(arr[i].children);
    
   }
   //將select添加到div中
    div.appendChild(sel);
  }
  createSelect(categories);
 </script>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: