JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<link rel="stylesheet" href="http://static.jstree.com/3.0.2/assets/dist/themes/default/style.min.css">
<script src="http://static.jstree.com/3.0.2/assets/dist/jstree.min.js"></script>
<body>
    <select id="sel">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select> 

<div id="html1">
</div>

</body>

JavaScript

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