javascript - 使用 jstree 插件显示选定的树

Question

我尝试用 jstree 插件制作一棵树。我想在用户选择一个选项时更改树内容。我制作了 jsfiddle 来显示我的问题:http://jsfiddle.net/hy5LF/

当您第一次从选择输入中选择一个数字时，您会得到完美的树，但在您第二次选择后，它不起作用。我得到节点列表而不是实际的树。

这是我显示所选树的函数:

function PrintTree(nr) {
    var myNode = document.getElementById("html1");
    while (myNode.firstChild) {
        myNode.removeChild(myNode.firstChild);
    }
    $('#html1').append('<ul></ul>');

    var elements = [];

    switch (nr) {
        case '1':
            elements.push("Saab");
            elements.push("Volvo");
            elements.push("BMW");
            break;
        case '2':
            elements.push("1");
            elements.push("2");
            elements.push("3");
            break;
        case '3':
            elements.push("a");
            elements.push("b");
            elements.push("c");
            break;
    }

    for (var i = 0; i < elements.length; i++) {
        $('#html1 ul').append('<li>' + elements[i] + '</li>');
    }

    $('#html1').jstree();
}

$(document).ready(function () {
    $("#sel").change(function () {
        var val = $(this).val();
        PrintTree(val);
        $('#html1').jstree();
    });
});

Answer 1

引用演示:JSFIDDLE您必须使用 destroy 销毁 jstree 的先前实例。

代码:

function PrintTree(nr) {
    var myNode = document.getElementById("html1");
    while (myNode.firstChild) {
        myNode.removeChild(myNode.firstChild);
    }
    $('#html1').append('<ul></ul>');

    var elements = [];

    switch (nr) {
        case '1':
            elements.push("Saab");
            elements.push("Volvo");
            elements.push("BMW");
            break;
        case '2':
            elements.push("1");
            elements.push("2");
            elements.push("3");
            break;
        case '3':
            elements.push("a");
            elements.push("b");
            elements.push("c");
            break;
    }

    for (var i = 0; i < elements.length; i++) {
        $('#html1 ul').append('<li>' + elements[i] + '</li>');
    }

    //$('#html1').jstree();
}

$(document).ready(function () {
    $("#sel").change(function () {
        $('#html1').jstree('destroy');//destroy the previous instance before initializing a new one
        var val = $(this).val();
        PrintTree(val);

        $('#html1').jstree();
    });
});