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;
//反復(fù):只要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判斷dom是否有存在某class的值
- 原生JS和jQuery操作DOM對比總結(jié)
- 使用js Math.random()函數(shù)生成n到m間的隨機數(shù)字
- javascript 獲取HTML DOM父、子、臨近節(jié)點
- jquery對象和javascript對象即DOM對象相互轉(zhuǎn)換
- JavaScript 節(jié)點操作 以及DOMDocument屬性和方法
- javascript中html字符串轉(zhuǎn)化為jquery dom對象的方法
- javascript學習筆記（三）BOM和DOM詳解
- js生成隨機數(shù)之random函數(shù)隨機示例
- JS DOM 操作實現(xiàn)代碼
相關(guān)文章
最近一直在學Javascript，打算寫一些文章，算做自己的學習心得吧，也可以算是學習筆記。沒有系統(tǒng)的知識點，太基礎(chǔ)的不想寫，主要是寫一些自己覺得有價值的地方2014-05-05
解決Jstree 選中父節(jié)點時被禁用的子節(jié)點也會選中的問題
下面小編就為大家分享一篇解決Jstree 選中父節(jié)點時被禁用的子節(jié)點也會選中的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
優(yōu)化 JavaScript 代碼的方法小結(jié)
客戶端腳本能讓你的應(yīng)用更加地動態(tài)和活躍， 但是瀏覽器對代碼的解析可能造成效率問題， 而這種性能差異在客戶端之間也不盡相同。 這里我們討論和給出一些優(yōu)化你的 JavaScript 代碼的提示和最佳實踐。2009-07-07
這篇文章主要介紹了ES6 class的應(yīng)用,結(jié)合實例形式分析了class在ES6面向?qū)ο蟪绦蛟O(shè)計中定義類的相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
眾所周知JavaScript中有多種方法可以合并對象,下面這篇文章主要給大家介紹了關(guān)于javaScript合并對象的多種方式及知識擴展,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
今天看到一段代碼，比較有意思，本周就再多加一問。2010-02-02
JavaScript最全公共方法匯總并解析（前端開發(fā)收藏必備）
JavaScript掌握各種常用的公共方法更是提升開發(fā)效率和代碼質(zhì)量的關(guān)鍵,無論你是初學者還是資深開發(fā)者,了解并熟練運用這些方法都能讓你的代碼更加簡潔、高效,本篇博客將為你詳細匯總并解析最全的JavaScript公共方法,涵蓋數(shù)組、對象、字符串、日期等各個方面的常用技巧2024-06-06
TDesign是騰訊各業(yè)務(wù)團隊在服務(wù)業(yè)務(wù)過程中沉淀的一套企業(yè)級設(shè)計體系,下面這篇文章主要給大家介紹了關(guān)于前端的框架TDesign小程序組件庫體驗的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-11-11
詳解如何通過JavaScript實現(xiàn)函數(shù)重載
這篇文章主要為大家詳細介紹了如何通過JavaScript實現(xiàn)函數(shù)重載，文中的示例代碼講解詳細，對我們學習JavaScript有一定的幫助，感興趣的可以了解一下2023-01-01
本文介紹了如何使用HTML、CSS和JavaScript構(gòu)建一個個人簡歷信息填寫頁面,涵蓋了簡歷頁面的HTML結(jié)構(gòu)設(shè)計、CSS樣式美化以及JavaScript實現(xiàn)動態(tài)功能和驗證的全過程,需要的朋友可以參考下2024-11-11