在下拉 html 中显示树结构答案

【问题标题】：Show a tree structure in dropdown html在下拉 html 中显示树结构
【发布时间】：2016-02-10 09:16:57
【问题描述】：

我正在下面更改我的代码，并希望以下拉列表的形式显示我的树结构

https://jsfiddle.net/sjmcpherso/kc9fehyz/

var vDOM = document.createDocumentFragment(); //Create a Document Fragment to store your Virtual DOM
function formCategoryTrees(object,par) { //Use the parent node as a parameter to create hierarchy
   var ul = document.createElement('ul');
   _.each(object,function(objectValues ){       
        var li = document.createElement('li');
        var leafCategoryId = objectValues["id"];
        var leafCategoryName =  objectValues["name"]; 
        li.appendChild(document.createTextNode(leafCategoryName + " " + leafCategoryId));

        if(objectValues["children"]) {      
                formCategoryTrees(objectValues["children"],li);
        }
        ul.appendChild(li);

    })    
    par.appendChild(ul);  //Append to the parent node after each iteration
}
formCategoryTrees(object.records,vDOM);
document.body.appendChild(vDOM); //Append your Virtual DOM to your page

【问题讨论】：

那么，有什么问题？
jstree.com/demo
我想在下拉列表而不是 jstree 中显示它
@vini 你是怎么实现这个的？
@ShervinShahrdar 我用过 jstree。

标签： javascript html tree dropdown

【解决方案1】：

使用jQuery的jsTree插件。

Here 演示。

你必须写这样的东西：

$('#jstree_demo').jstree({
  "core" : {
    "animation" : 0,
    "check_callback" : true,
    "themes" : { "stripes" : true },
    'data' : {
      'url' : function (node) {
        return node.id === '#' ?
          'ajax_demo_roots.json' : 'ajax_demo_children.json';
      },
      'data' : function (node) {
        return { 'id' : node.id };
      }
    }
  },
  "types" : {
    "#" : {
      "max_children" : 1,
      "max_depth" : 4,
      "valid_children" : ["root"]
    },
    "root" : {
      "icon" : "/static/3.2.1/assets/images/tree_icon.png",
      "valid_children" : ["default"]
    },
    "default" : {
      "valid_children" : ["default","file"]
    },
    "file" : {
      "icon" : "glyphicon glyphicon-file",
      "valid_children" : []
    }
  },
  "plugins" : [
    "contextmenu", "dnd", "search",
    "state", "types", "wholerow"
  ]
});

如果提供更多细节，我可以更好地帮助您。

【讨论】：