本文實例為大家分享了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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
