快捷導(dǎo)航

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

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

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

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

效果圖：

代碼：

<!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，設(shè)置其內(nèi)容為"-請選擇-"，值為-1,將option添加到select中
    sel.add(new Option("--請選擇--",-1));
   //遍歷arr
   for(var i=0;i<arr.length;i++){
    //創(chuàng)建一個option，設(shè)置內(nèi)容為當(dāng)前元素的name屬性，設(shè)置value為當(dāng)前元素的id屬性，將新option添加到select中
    sel.add(new Option(arr[i].name,arr[i].id));   
   }//(遍歷結(jié)束)
   //為sel綁定onchange事件
   sel.onchange=function(){
    //反復(fù):只要當(dāng)前select不是div的lastChild
    while(this!=div.lastChild)
     //讓div刪除其lastChild
      div.removeChild(div.lastChild);
    //獲得當(dāng)前選中項的下表-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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: