欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

相關(guān)文章

  • JS實現(xiàn)水平移動與垂直移動動畫

    JS實現(xiàn)水平移動與垂直移動動畫

    這篇文章主要為大家詳細介紹了JS實現(xiàn)水平移動與垂直移動動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-12-12
  • JS實現(xiàn)的A*尋路算法詳解

    JS實現(xiàn)的A*尋路算法詳解

    這篇文章主要介紹了JS實現(xiàn)的A*尋路算法,結(jié)合實例形式詳細分析了A*尋路算法的概念、原理、實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下
    2018-12-12
  • javascript實現(xiàn)實時輸出當前的時間

    javascript實現(xiàn)實時輸出當前的時間

    在網(wǎng)頁中實時的顯示時間，不但可以給網(wǎng)頁添色，還可以方便瀏覽者掌握當前時間，為了提高網(wǎng)站的開發(fā)速度，可以把主代碼封裝在一個單獨的函數(shù)里面，在需要的時候直接調(diào)用而我為了演示，直接寫在了主頁面，方便大家觀看
    2015-04-04
  • uniapp項目實踐自定義滑動觸摸組件實現(xiàn)示例

    uniapp項目實踐自定義滑動觸摸組件實現(xiàn)示例

    這篇文章主要介紹了uniapp項目實踐自定義滑動觸摸組件實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-09-09
  • el-popover嵌套select彈窗點擊實現(xiàn)自定義關(guān)閉功能

    el-popover嵌套select彈窗點擊實現(xiàn)自定義關(guān)閉功能

    el-popover彈窗內(nèi)嵌套下拉選擇框,點擊el-popover彈出外部區(qū)域需關(guān)閉彈窗,點擊查詢、重置需關(guān)閉彈窗,遇到這樣的需求怎么解決呢,下面小編給大家介紹el-popover嵌套select彈窗點擊實現(xiàn)自定義關(guān)閉功能,感興趣的朋友一起看看吧
    2024-07-07
  • javascript性能優(yōu)化之DOM交互操作實例分析

    javascript性能優(yōu)化之DOM交互操作實例分析

    這篇文章主要介紹了javascript性能優(yōu)化之DOM交互操作技巧,結(jié)合實例形式總結(jié)分析了JavaScript針對DOM操作過程中的各種常見優(yōu)化操作技巧,需要的朋友可以參考下
    2015-12-12
  • 用JS寫的一個Ajax庫(實例代碼)

    用JS寫的一個Ajax庫(實例代碼)

    下面小編就為大家?guī)硪黄肑S寫的一個Ajax庫(實例代碼)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-08
  • Next.js解決axios獲取真實ip問題方法分析

    Next.js解決axios獲取真實ip問題方法分析

    這篇文章主要介紹了Next.js解決axios獲取真實ip問題方法分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-09-09
  • JAVA四種基本排序方法實例總結(jié)

    JAVA四種基本排序方法實例總結(jié)

    這篇文章主要介紹了JAVA四種基本排序方法,較為詳細的總結(jié)分析了插入法、冒泡法、選擇法及Shell排序等四種常用的排序技巧,非常具有實用價值,需要的朋友可以參考下
    2015-07-07
  • 實例詳解JS中的事件循環(huán)機制

    實例詳解JS中的事件循環(huán)機制

    JavaScript是單線程的腳本語言,所以代碼在執(zhí)行的時候,只有一個主線程來執(zhí)行所有的任務(wù),同一個時間只能做同一件事情。本文就為大家詳細講解一下它的件循環(huán)機制，需要的可以參考一下
    2022-04-04

最新評論