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