溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2021-07-07 13:39:55 來源：億速云 閱讀：151 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)JavaScript結(jié)合HTML DOM如何實(shí)現(xiàn)聯(lián)動菜單，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

效果圖：

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

代碼：

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

關(guān)于“JavaScript結(jié)合HTML DOM如何實(shí)現(xiàn)聯(lián)動菜單”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手