直接上代码 ：
直接看最下面：
<!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.onchange=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>
红色部分代码，用递归解决多级联动，基本实现根据数据进行查找，不过递归效率是非常低的，视情况使用。