87,910
社区成员
发帖
与我相关
我的任务
分享求js 递归函数
[{"id":1,"pid":0,"name":"K12\u8bfe\u7a0b","child":[{"id":5,"pid":1,"name":"4-5\u5c81K\u8bfe\u7a0b","child":[]},{"id":6,"pid":1,"name":"5-6\u5c81G1\u8bfe\u7a0b","child":[]},{"id":7,"pid":1,"name":"6-7\u5c81G2\u8bfe\u7a0b","child":[]},{"id":8,"pid":1,"name":"7-8\u5c81G3\u8bfe\u7a0b","child":[]},{"id":9,"pid":1,"name":"8-9\u5c81G4\u8bfe\u7a0b","child":[]},{"id":10,"pid":1,"name":"9-10\u5c81G5\u8bfe\u7a0b","child":[]},{"id":11,"pid":1,"name":"10-11\u5c81G6\u8bfe\u7a0b","child":[]},{"id":12,"pid":1,"name":"11-12\u5c81G7\u8bfe\u7a0b","child":[]},{"id":13,"pid":1,"name":"12\u5c81\u4ee5\u4e0aG8\u8bfe\u7a0b","child":[]}]},{"id":2,"pid":0,"name":"\u7279\u8272\u8bfe\u7a0b","child":[{"id":14,"pid":2,"name":"3-6\u5c81\u5e7c\u513f\u827a\u672f\u63a2\u7d22","child":[]},{"id":15,"pid":2,"name":"7-8\u5c81\u827a\u672f\u5f00\u62d3","child":[]}]},{"id":3,"pid":0,"name":"\u6234\u7ef4\u65af","child":[{"id":16,"pid":3,"name":"G1\u8bfe\u7a0b","child":[]},{"id":17,"pid":3,"name":"G2\u8bfe\u7a0b","child":[]},{"id":18,"pid":3,"name":"G3\u8bfe\u7a0b","child":[]}]},{"id":4,"pid":0,"name":"\u56fd\u9645\u6559\u6388\u8bb2\u5ea7","child":[{"id":19,"pid":4,"name":"\u5e15\u514b\u65af\u8bb2\u5ea7","child":[]},{"id":20,"pid":4,"name":"\u738b\u6021\u534e\u5927\u6982\u5ff5","child":[]}]}]
因为我这个json是无限分类的，目前这里显示是2级，其实可能会有很多级，
我想写个递归什么函数方法，比如我想查找 id=9 ,就用html 中的 select 标签 把这一同级元素和上一级显示出来，其中id=9的默认选中
如果ID=17 的
...全文
请发表友善的回复…
发表回复
dnpao 2019-08-09
- 打赏
- 举报
高手有这个参考就可以了，谢谢！
風灬雲 2019-08-09
- 打赏
- 举报
没说是什么开发的，下面是原生的代码。看看是这个意思么
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div id="box"></div>
<input type="text" id="number"/> <input type="button" value="提交" id="btn"/>
</div>
<script>
let data = [{
"id" : 1,
"pid" : 0,
"name" : "K12\u8bfe\u7a0b",
"child" : [{"id" : 5, "pid" : 1, "name" : "4-5\u5c81K\u8bfe\u7a0b", "child" : []}, {
"id" : 6,
"pid" : 1,
"name" : "5-6\u5c81G1\u8bfe\u7a0b",
"child" : []
}, {"id" : 7, "pid" : 1, "name" : "6-7\u5c81G2\u8bfe\u7a0b", "child" : []}, {
"id" : 8,
"pid" : 1,
"name" : "7-8\u5c81G3\u8bfe\u7a0b",
"child" : []
}, {"id" : 9, "pid" : 1, "name" : "8-9\u5c81G4\u8bfe\u7a0b", "child" : []}, {
"id" : 10,
"pid" : 1,
"name" : "9-10\u5c81G5\u8bfe\u7a0b",
"child" : []
}, {"id" : 11, "pid" : 1, "name" : "10-11\u5c81G6\u8bfe\u7a0b", "child" : []}, {
"id" : 12,
"pid" : 1,
"name" : "11-12\u5c81G7\u8bfe\u7a0b",
"child" : []
}, {"id" : 13, "pid" : 1, "name" : "12\u5c81\u4ee5\u4e0aG8\u8bfe\u7a0b", "child" : []}]
}, {
"id" : 2,
"pid" : 0,
"name" : "\u7279\u8272\u8bfe\u7a0b",
"child" : [{
"id" : 14,
"pid" : 2,
"name" : "3-6\u5c81\u5e7c\u513f\u827a\u672f\u63a2\u7d22",
"child" : []
}, {"id" : 15, "pid" : 2, "name" : "7-8\u5c81\u827a\u672f\u5f00\u62d3", "child" : []}]
}, {
"id" : 3,
"pid" : 0,
"name" : "\u6234\u7ef4\u65af",
"child" : [{"id" : 16, "pid" : 3, "name" : "G1\u8bfe\u7a0b", "child" : []}, {
"id" : 17,
"pid" : 3,
"name" : "G2\u8bfe\u7a0b",
"child" : []
}, {"id" : 18, "pid" : 3, "name" : "G3\u8bfe\u7a0b", "child" : []}]
}, {
"id" : 4,
"pid" : 0,
"name" : "\u56fd\u9645\u6559\u6388\u8bb2\u5ea7",
"child" : [{"id" : 19, "pid" : 4, "name" : "\u5e15\u514b\u65af\u8bb2\u5ea7", "child" : [{
"id" : 22,
"pid" : 4,
"name" : "新增三级节点测试2",
"child" : []
}]}, {
"id" : 20,
"pid" : 4,
"name" : "\u738b\u6021\u534e\u5927\u6982\u5ff5",
"child" : [{
"id" : 21,
"pid" : 4,
"name" : "新增三级节点测试1",
"child" : []
}]
}]
}];
function selectCreate(data, parent, id){
if(data.length){
let select = document.createElement('select');
select.id = id;
select.child = null;
data.forEach(e => {
let opt = document.createElement('option');
opt.innerText = e.name;
opt.value = e.id;
select.appendChild(opt);
});
select.onchange = function(){
console.log(select.value);
if(!select.child){
if(data.filter(e => e.id == select.value)[0].child.length){
select.child = selectCreate(data.filter(e => e.id == select.value)[0].child, parent, select.value)
}
} else {
if(select.child.id != select.value){
removeSele(select.child,parent);
select.child = null;
if(data.filter(e => e.id == select.value)[0].child.length){
select.child = selectCreate(data.filter(e => e.id == select.value)[0].child, parent, select.value)
}
}
}
};
parent.appendChild(select);
if(data[0].child.length){
select.child = selectCreate(data.filter(e => e.id == select.value)[0].child, parent, select.value)
}
return select;
}
}
function removeSele(ele ,parent){
parent.removeChild(ele);
if(ele.child){
removeSele(ele.child,parent)
}
}
let firstSelect = null;
function createS(data, parent, id){
firstSelect = selectCreate(data, parent,id);
}
createS(data, box , 0);
btn.onclick = ()=>{
console.log(number.value);
position(data,number.value, firstSelect)
};
function position(data,id, selectEle){
data.forEach((e,i)=>{
if(e.id == id ){
selectEle.value = e.id;
selectEle.onchange(e.id)
}
if(isParent(e,number.value)) {
selectEle.value = e.id;
selectEle.onchange(e.id);
position(e.child,id, selectEle.child)
}
})
}
function isParent(opt,id){
let res = false;
if(opt.child.length){
opt.child.forEach(e=>{
if(e.id == id){
res = true;
} else {
if(isParent(e,id)){
res = true;
}
}
})
}
return res;
}
</script>
</body>
</html>
