Javascript 使用jstree插件显示所选树

我试着用jstree插件制作一棵树。我想在用户选择选项时更改树内容。 我制作了JSFIDLE来显示我的问题：

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

这是我的函数，它显示所选的树：

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();
    });
});

函数打印树（nr）{
var myNode=document.getElementById（“html1”）；
while（myNode.firstChild）{
myNode.removeChild（myNode.firstChild）；
}
$（'#html1'）。追加（'
'）；
var元素=[]；
交换机（nr）{
案例“1”：
元素推送（“萨博”）；
元素。推动（“沃尔沃”）；
元素。推动（“宝马”）；
打破
案例“2”：
元素。推送（“1”）；
元素。推送（“2”）；
元素。推送（“3”）；
打破
案例“3”：
元素。推送（“a”）；
元素。推送（“b”）；
元素。推送（“c”）；
打破
}
对于（var i=0；i'+元素[i]+''）；
}
$（'#html1'）.jstree（）；
}
$（文档）.ready（函数（）{
$（“#sel”）.change（函数（）{
var val=$（this.val（）；
打印树（val）；
$（'#html1'）.jstree（）；
});
});

我不是jstree专家，但我想在元素上调用

jstree（）

可能有问题，因为元素已经是jstree了

因此，每次调用时，我都会再次删除并创建div，现在它可以正常工作了：

我也做了一些小的更新，但很简单：

function PrintTree(nr) {

    var wrapper = $("<div>");
    wrapper.insertAfter('#html1');
    $('#html1').remove();
    wrapper.attr('id', 'html1');
    wrapper.show(); // for some reason my new element were not visible?!? 
                    // So I had to display it... 

    var list = $("<ul>");
    wrapper.append(list);

    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++) {
        list.append('<li>' + elements[i] + '</li>');
    }

    wrapper.jstree();
}

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

函数打印树（nr）{
变量包装器=$（“”）；
wrapper.insertAfter（'#html1'）；
$（'#html1'）。删除（）；
attr（'id'，'html1'）；
wrapper.show（）；//由于某种原因，我的新元素不可见？！？
//所以我不得不展示它。。。
变量列表=$（“
”）；
附加（列表）；
var元素=[]；
交换机（nr）{
案例“1”：
元素推送（“萨博”）；
元素。推动（“沃尔沃”）；
元素。推动（“宝马”）；
打破
案例“2”：
元素。推送（“1”）；
元素。推送（“2”）；
元素。推送（“3”）；
打破
案例“3”：
元素。推送（“a”）；
元素。推送（“b”）；
元素。推送（“c”）；
打破
}
对于（var i=0；i'+元素[i]+''）；
}
jstree（）；
}
$（文档）.ready（函数（）{
$（“#sel”）.change（函数（）{
var val=$（this.val（）；
打印树（val）；
});
});

请参阅演示： 您必须使用

destroy

销毁jstree的上一个实例

代码：

函数打印树（nr）{
var myNode=document.getElementById（“html1”）；
while（myNode.firstChild）{
myNode.removeChild（myNode.firstChild）；
}
$（'#html1'）。追加（'
'）；
var元素=[]；
交换机（nr）{
案例“1”：
元素推送（“萨博”）；
元素。推动（“沃尔沃”）；
元素。推动（“宝马”）；
打破
案例“2”：
元素。推送（“1”）；
元素。推送（“2”）；
元素。推送（“3”）；
打破
案例“3”：
元素。推送（“a”）；
元素。推送（“b”）；
元素。推送（“c”）；
打破
}
对于（var i=0；i'+元素[i]+''）；
}
//$（'#html1'）.jstree（）；
}
$（文档）.ready（函数（）{
$（“#sel”）.change（函数（）{
$（'#html1'）.jstree（'destroy'）；//在初始化新实例之前先销毁以前的实例
var val=$（this.val（）；
打印树（val）；
$（'#html1'）.jstree（）；
});
});

非常感谢。它不知道这可能是一个问题。@user3482724难怪，这只是一个插件，有人做了，他可能没有意识到有人想重新创建整个列表。似乎存在一个refresh（）方法

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();
    });
});