常用的三联动实现
<!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,接收一個數組參數arrfunction createSelect(arr){ //創建一個selectvar sel=document.createElement("select");//創建一個option，設置其內容為"-請選擇-"，值為-1,將option添加到select中sel.add(new Option("--請選擇--",-1));//遍歷arrfor(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.οnchange=function(){//反復:只要當前select不是div的lastChildwhile(this!=div.lastChild)//讓div刪除其lastChilddiv.removeChild(div.lastChild);//獲得當前選中項的下表-1，保存在i中var i=this.selectedIndex-1;//如果arr中i位置的商品類別有childrenif(i>=0&&arr[i].children!==undefined)//用arr中i位置的商品類別的children數組創建下一個selectcreateSelect(arr[i].children);}//將select添加到div中div.appendChild(sel);}createSelect(categories);</script>
</body>
</html>
轉載于:https://www.cnblogs.com/harlem/p/6669655.html
總結
- 上一篇： 使用绘图API自定义组件
- 下一篇： RHEL环境下调试Shell脚本时遇到字