效果图：

代码如下：

！DOCTYPE HTMLhtmlheadtitle联动菜单/title meta charset=' utf-8 '/head body div id=' category '/div 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': '手套'}]}];（函数(arr){ var select=//创建选择文件。创建元素(' select ')；//将选择追加到挑选中选择。添加（新选项('-请选择-',-1));//遍历到达)中每个商品类别对象for(var I=0；长度；i ){ //将选择权追加到挑选中选择添加（新选项。名字，arr[i].id))；} var fun=arguments.callee//为挑选绑定onchange事件：选择。onchange=function(){//this-.前的元素对象//获得这的家长，保存在变量父母中var parent=this.parentNode//反复：只要这不是父母的最后一个子节点趁着（这个！=parent.lastChild){ //删除父母下的最后一个子节点父母。移除子级(父级。last child)；} //获得当前挑选选中项的下标I var I=this . selectedindexif(i0){//如果i0 //获得到达)中i-1位置的商品类别对象的孩子们，保存在变量sub ate var sub ate=arr[I-1].儿童；//调用好玩(sub ate)sub ate！==undefinedfun(SubState)；} } //将挑选追加到编号为种类的父元素下文件。getelementbyid(' category ').appendChild(选择);})(类别);/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！