js中DOM三級列表（代碼分享）
更新時間：2017年03月20日 08:45:25 作者：18301695170
本篇文章主要介紹了js中DOM實現(xiàn)三級列表的代碼，具有很好的參考價值。下面跟著小編一起來看下吧
效果圖：
代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>聯(lián)動菜單</title>
<meta charset="utf-8" />
</head>
<body>
<div id="category"></div>
<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":'手套'}
]}
];
(function(arr){
var select=//創(chuàng)建select
document.createElement("select");
//將opt追加到select中
select.add(new Option("-請選擇-",-1));
//遍歷arr中每個商品類別對象
for(var i=0;i<arr.length;i++){
//將option追加到select中
select.add(
new Option(arr[i].name,arr[i].id)
);
}
var fun=arguments.callee;
//為select綁定onchange事件:
select.onchange=function(){
//this->.前的元素對象
//獲得this的parent，保存在變量parent中
var parent=this.parentNode;
//反復:只要this不是parent的最后一個子節(jié)點
while(this!=parent.lastChild){
//刪除parent下的最后一個子節(jié)點
parent.removeChild(parent.lastChild);
}
//獲得當前select選中項的下標i
var i=this.selectedIndex;
if(i>0){//如果i>0
//獲得arr中i-1位置的商品類別對象的children,保存在變量subCate
var subCate=arr[i-1].children;
//調(diào)用fun(subCate)
subCate!==undefined&&fun(subCate);
}
}
//將select追加到id為category的父元素下
document.getElementById("category")
.appendChild(select);
})(categories);
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
您可能感興趣的文章:
相關文章
這篇文章主要為大家詳細介紹了JS實現(xiàn)水平移動與垂直移動動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了JS實現(xiàn)的A*尋路算法,結合實例形式詳細分析了A*尋路算法的概念、原理、實現(xiàn)技巧與相關注意事項,需要的朋友可以參考下2018-12-12
在網(wǎng)頁中實時的顯示時間，不但可以給網(wǎng)頁添色，還可以方便瀏覽者掌握當前時間，為了提高網(wǎng)站的開發(fā)速度，可以把主代碼封裝在一個單獨的函數(shù)里面，在需要的時候直接調(diào)用而我為了演示，直接寫在了主頁面，方便大家觀看2015-04-04
這篇文章主要介紹了uniapp項目實踐自定義滑動觸摸組件實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-09-09
el-popover嵌套select彈窗點擊實現(xiàn)自定義關閉功能
el-popover彈窗內(nèi)嵌套下拉選擇框,點擊el-popover彈出外部區(qū)域需關閉彈窗,點擊查詢、重置需關閉彈窗,遇到這樣的需求怎么解決呢,下面小編給大家介紹el-popover嵌套select彈窗點擊實現(xiàn)自定義關閉功能,感興趣的朋友一起看看吧2024-07-07
javascript性能優(yōu)化之DOM交互操作實例分析
這篇文章主要介紹了javascript性能優(yōu)化之DOM交互操作技巧,結合實例形式總結分析了JavaScript針對DOM操作過程中的各種常見優(yōu)化操作技巧,需要的朋友可以參考下2015-12-12
下面小編就為大家?guī)硪黄肑S寫的一個Ajax庫(實例代碼)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了Next.js解決axios獲取真實ip問題方法分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要介紹了JAVA四種基本排序方法,較為詳細的總結分析了插入法、冒泡法、選擇法及Shell排序等四種常用的排序技巧,非常具有實用價值,需要的朋友可以參考下2015-07-07
JavaScript是單線程的腳本語言,所以代碼在執(zhí)行的時候,只有一個主線程來執(zhí)行所有的任務,同一個時間只能做同一件事情。本文就為大家詳細講解一下它的件循環(huán)機制，需要的可以參考一下2022-04-04