Отображение выбранного дерева с помощью 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 Вам придется уничтожить предыдущий экземпляр jstree, используя destroy.

код:

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

Answer 2

Im не jstree эксперт, но я думаю, может быть проблема с вызовом jstree() на элементе, который уже был jstree.

Так я удалить и создать DIV снова с каждым вызовом, и он работает в настоящее время: http://jsfiddle.net/hy5LF/4/

Кроме того, я сделал несколько незначительных обновлений, но только очень простые вещи:

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