直接上代码 :
直接看最下面:
<!DOCTYPE HTML> <html> <head> <title>递归实现联动</title> <meta charset="utf-8" /> </head> <body> <div id="category"> </div> </body> <script> /*使用 HTML DOM 的方式实现联动菜单*/ var build=[ {"id":10,"name":'建筑业企业资质',"children":[ {"id":101,"name":'专业承包',"children":[ {"id":1020,"name":'地基基础工和专业承包',"children":[ {"id":10201,"name":'一级',"children":[ {"id":1020101,"name":'城市园林绿化资质',"children":[ {"id":102010103,"name":'信息系统集成及服务',"children":[ {"id":102010102,"name":'无限递归'} ]} ]}, {"id":1020102,"name":'无限递归'}, {"id":1020103,"name":'无限递归'}, {"id":1020104,"name":'无限递归'}, ]}, {"id":10202,"name":'一级以下'}, {"id":10203,"name":'二级以上'}, {"id":10204,"name":'二级以下'}, {"id":10205,"name":'三级'}, {"id":10206,"name":'三级以上'}, ]}, {"id":1029,"name":'钢结构工程专业承包',"children":[ {"id":10201,"name":'一级',"children":[ {"id":1020101,"name":'无限递归',"children":[ {"id":102010101,"name":'无限递归',"children":[ {"id":102010103,"name":'无限递归',"children":[ {"id":102010102,"name":'无限递归'} ]} ]}, {"id":102010102,"name":'无限递归'} ]}, {"id":1020102,"name":'无限递归'}, {"id":1020103,"name":'无限递归'}, {"id":1020104,"name":'无限递归'}, ]}, {"id":10202,"name":'一级以下'}, {"id":10203,"name":'二级以上'}, {"id":10204,"name":'二级以下'}, {"id":10205,"name":'三级'}, {"id":10206,"name":'三级以上'}, ]}, ]}, ]}, ]; function constructionLibrary(build){ var selectChange=document.createElement("select"); category.appendChild(selectChange); // 设置默认头 var opt=new Option("---请选择---",-1); selectChange.appendChild(opt); var frag=document.createDocumentFragment(); for(var i=0;i<build.length;i++){ var opt=new Option(build[i].name,build[i].id); frag.appendChild(opt); } selectChange.appendChild(frag); selectChange.οnchange=function(){ while(this.parentNode.lastChild!=this){ this.parentNode.removeChild(this.parentNode.lastChild); } var index=this.selectedIndex; if(index>0){ var cate=build[index-1]; } if(cate.children){ constructionLibrary(cate.children) } } } constructionLibrary(build); </script> </html>
真正重要的是在最下面 ,用递归解决多级联动问题,基本实现根据数据进行查找,层级多少都不用管,不过递归效率是非常低的,视情况使用。