帝王谷资源网 Design By www.wdxyy.com
本文实例为大家分享了js三级联动菜单展示的具体代码,供大家参考,具体内容如下
效果图:
代码:
<!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,接收一个数组参数arr function createSelect(arr){ //创建一个select var sel=document.createElement("select"); //创建一个option,设置其内容为"-请选择-",值为-1,将option添加到select中 sel.add(new Option("--请选择--",-1)); //遍历arr for(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.onchange=function(){ //反复:只要当前select不是div的lastChild while(this!=div.lastChild) //让div删除其lastChild div.removeChild(div.lastChild); //获得当前选中项的下表-1,保存在i中 var i=this.selectedIndex-1; //如果arr中i位置的商品类别有children if(i>=0&&arr[i].children!==undefined) //用arr中i位置的商品类别的children数组创建下一个select createSelect(arr[i].children); } //将select添加到div中 div.appendChild(sel); } createSelect(categories); </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
HTML,DOM,联动菜单
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年10月25日
2024年10月25日
- 群星2013-青春缤纷辑压箱宝大公开3CD2[新加坡限量版][WAV整轨]
- 林育群.2013-BalladShow(日本版)【环球】【WAV+CUE】
- 陈加洛.1992-痛到感觉不到【宝丽金】【WAV+CUE】
- 群星.2023-宿命之敌电视剧原声带【韶愔音乐】【FLAC分轨】
- 東京事変-大発見[FLAC+CUE]
- 椎名林檎-三文ゴシップ[FLAC+CUE]
- 2024年08月04日
- 裘德《裘德「最后的水族馆」演唱会LIVE》[320K/MP3][228.89MB]
- 裘德《裘德「最后的水族馆」演唱会LIVE》[24bit 48kHz][FLAC/分轨][2.08G]
- 基因三重奏《如果你什么都不说 音乐会现场录音》[320K/MP3][145.37MB]
- 孟庭苇.1996-月亮说话(2020环球24KGOLD限量版)【上华】【WAV+CUE】
- 群星.1997-新艺宝优质音响系列·国语精选监听版【新艺宝】【WAV+CUE】
- 阿桑.2005-寂寞在唱歌(星外星引进版)【华研国际】【WAV+CUE】
- 基因三重奏《如果你什么都不说 音乐会现场录音》[FLAC/分轨][287.43MB]
- 蔡题谦《我爱你,却依然要看你走》[320K/MP3][88.65MB]