treeSelect.js

let data = {
        type: "folder",
        children: [
          {
            type: "folder",
            name: "DEPTH2-0",
            children: [
              {
                type: "folder",
                name: "DEPTH3-0",
                children: [
                  {
                    type: "url",
                    name: "url1-0",
                    url: "http://test2.at"
                  },
                  {
                    type: "url",
                    name: "url2-0",
                    url: "http://test2.at"
                  }
                ]
              }
            ]
          },
          {
            type: "folder",
            name: "DEPTH2-1",
            children: [
              {
                type: "folder",
                name: "DEPTH3-1",
                children: [
                  {
                    type: "url",
                    name: "url1-1",
                    url: "http://test2.at"
                  },
                  {
                    type: "url",
                    name: "url2-1",
                    url: "http://test2.at"
                  },
                  {
                    type: "folder",
                    name: "DEPTH4-1",
                    children: [
                      {
                        type: "url",
                        name: "url1-4",
                        url: "http://test2.at"
                      },
                      {
                        type: "url",
                        name: "url2-4",
                        url: "http://test2.at"
                      },
                      {
                        type: "folder",
                        name: "DEPTH5-1",
                        children: [
                          {
                            type: "url",
                            name: "url1-5",
                            url: "http://test2.at"
                          },
                          {
                            type: "url",
                            name: "url2-5",
                            url: "http://test2.at"
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }

      function createSelect(list)
      {
        let selectNode = document.createElement("SELECT");
        for(let listElement of list)
        {
          let optionNode = document.createElement("OPTION");
          optionNode.value = listElement.value;
          optionNode.innerText = listElement.text;
          selectNode.appendChild(optionNode);
        }
        return selectNode;
      }

      function createNumberSelect(list)
      {
        let selectNode = document.createElement("SELECT");
        for(let [it,listElement] of list.entries())
        {
          let optionNode = document.createElement("OPTION");
          optionNode.value = it;
          optionNode.innerText = listElement
          selectNode.appendChild(optionNode);
        }
        return selectNode;
      }

      function removeSiblingsWithClass(node,className){
        node = node.nextElementSibling;
        if(node){
          let temp = node.nextElementSibling;
          node.parentNode.removeChild(node);
          while (temp && temp.classList.contains(className))
          {
            node = temp;
            temp = node.nextElementSibling;
            node.parentNode.removeChild(node);
          }
        }
      }

      function selectTree(data,rootElement)
      {
        if(data.type == "folder")
        {
          let root = data.children;
          let rootNames = [];
          for(let node of root)
          {
            rootNames.push(node.name);
          }
          let select = createNumberSelect(rootNames);
          select.onchange = (e) =>
          {
            let target = e.target;
            let value  = target.value;
            let root = data.children[value];

            removeSiblingsWithClass(target,"treeSelect")
            selectTree(root,rootElement);
          }
          select.onfocus = (e) => { e.target.selectedIndex = -1; };
          select.classList.add("treeSelect");
          rootElement.appendChild(select);
        }
        else
        {
          let root = data;
          if(root.type != "url")
          {
            let rootNames = [];
            for(let node of root)
            {
              rootNames.push(node.name);
            }
            let select = createNumberSelect(rootNames);
            rootElement.appendChild(select);
          }
        }
      }