JavaScript结合HTML DOM实现联动菜单

这个例子分享了js三级联动菜单的具体代码，供大家参考。具体内容如下

渲染：

代码：

！DOCTYPE HTMLhtmlheadtitle联动菜单/title metacarset=' utf-8 '/script/*通过HTML DOM *实现联动菜单/varcategories=[{'id' :10，' name' : '男装'，Children' : [{'id' :101，' name ' 3: '正装' }，{'id':102，' name ' 3: 't恤' }，{ }儿童' : [{'id' :201，' name' : '短裙' }，{'id':202，' name': '连衣裙' }，{'id' :203，' name' 3333。Name': '长裤' }，{'id':2031，' name': '七分裤' }，{'id':2031，' name': '七分裤' }]，]}，{ ' ID Children ' :[{ ' ID ' :301，' name' :' hat' }，{'id':302，' Name ' 33://定义函数create sele，接收数组参数arr函数create sele(arr){//创建一个select var sel=document . create element(' select ')；//创建一个选项，将其内容设置为“-请选择-”，其值设置为-1，并将该选项添加到SEL。添加(新选项('-请选择-'，-1))；//的traverse arr(var I=0；长度；I ){ //创建一个选项，将内容设置为当前元素的名称属性，将值设置为当前元素的id属性，将新选项添加到SEL中。添加(新选项(arr [I])。名字，阿[我]。ID))；}///(遍历结束)//bind onchange event sel . onchange=function(){//只要当前select不是lastChild while(this！=div.lastChild) //让div删除它的lastchild div。removechild (div。last child)；//获取当前选中项目的下表-1，保存在I var i=this.selectedIndex-1中；//如果arr中位置I的商品类别有子if(i=0arr[i])。孩子们！==未定义)//创建下一个选择创建选择(arr [I]。儿童)，商品类别的儿童数组位于arr中的位置I；}//将select添加到div.appendChild(sel)中的div} createSelect(类别)；/script/body/html以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。