Realization of tree drop down box based on JavaScript

Usually, we often encounter the problem of tree structure, such as displaying directory structure.

In most cases, the background will return such data, as follows:

[
{ id: 19, pid: 0, name: 'nodejs' },
{ id: 20, pid: 19, name: 'express' },
{ id: 21, pid: 19, name: 'mongodb' },
{ id: 60, pid: 20, name: 'ejs' },
{ id: 59, pid: 0, name: ' Front-end development ' },
{ id: 70, pid: 59, name: 'javascript' },
{ id: 71, pid: 59, name: 'css' },
{ id: 72, pid: 59, name: 'html' },
{ id: 73, pid: 59, name: 'bootstrap' },
{ id: 61, pid: 0, name: ' Visual design ' },
{ id: 63, pid: 61, name: ' Web page design ' },
]

This data structure is easy to handle in the background, but difficult to handle in the foreground, so it needs to be converted into tree json data first, as follows:

[
{ id: 19, pid: 0, name: 'nodejs',
 children:[
   { id: 20, pid: 19, name: 'express',children:[{ id: 60, pid: 20, name: 'ejs' }]},
   { id: 21, pid: 19, name: 'mongodb' }
   ]
},
{ id: 59, pid: 0, name: ' Front-end development ',
 children:[
  { id: 70, pid: 59, name: 'javascript' },
  { id: 71, pid: 59, name: 'css' },
  { id: 72, pid: 59, name: 'html' },
  { id: 73, pid: 59, name: 'bootstrap' }
   ]
},
{ id: 61, pid: 0, name: ' Visual design ',children:[{ id: 63, pid: 61, name: ' Web page design ' }]},
]

In this way, it is very convenient to build tree components recursively.

If the background can directly return to this structure, it is best, otherwise the foreground needs to do conversion.

1. Convert the data of list array structure into tree structure json

//list  Turn into a tree json
function listToTree(list,pid) {
var ret = [];//1 Temporary array of results 
for(var i in list) {
if(list[i].pid == pid) {// If the parent of the current item id Equal to the parent to find id , recursive 
 list[i].children = listToTree(list, list[i].id);
 ret.push(list[i]);// Save the current item to a temporary array 
}
}
return ret;// Returns the result at the end of recursion 
}

var tree=listToTree(list,0);// Call the function, passing in the list Array, and the top-level element in the tree pid

console.log(tree);

2. Drop-down box is generated according to tree structure json data

// Add a drop-down box container to a Web page 
<select id="selectbox" name=""></select>
//js Script, recursively generated 
// Get the container object 
var selectbox=document.getElementById("selectbox");

// Spanning tree drop-down menu 
var j="-";// Prefix symbol, which is used to show the parent-child relationship. Other symbols can be used here 
function creatSelectTree(d){
 var option="";
 for(var i=0;i<d.length;i++){
 if(d[i].children.length){// If there is a subset 
  option+="<option value='"+d[i].id+"'>"+j+d[i].name+"</option>";
 j+="-";// Prefix sign addition 1 A symbol 
  option+=creatSelectTree(d[i].children);// Recursive call subset 
 j=j.slice(0,j.length-1);// Every time the recursion ends and returns to the superior, the prefix symbol needs to be subtracted 1 A symbol 
  }else{// No subsets are displayed directly 
  option+="<option value='"+d[i].id+"'>"+j+d[i].name+"</option>";
  }
  }
 return option;// Return to the final html Results 
 }

// Call the function and enter and exit the structure into the drop-down box container 
selectbox.innerHTML=creatSelectTree(tree);

If you want to learn more, you can click jquery drop-down box effect summary and JavaScript drop-down box effect summary to learn.