In this article I will explain with an example, how to populate jsTree in HTML.
 
 
HTML Markup
The following HTML Markup consists of:
DIV – For generating the jQuery TreeView.
HiddenField – For storing selected items.
Button – For displaying selected items.
<div id="jstree"></div>
<input type="hidden" id="selectedItems" />
<input type="button" value="Submit" id="btnSubmit" />
 
 
jQuery TreeView implementation
Inside the jQuery document ready event handler, the JSON data is set in the variable.
Then, the jQuery jsTree plugin is applied to the HTML DIV and the JSON data is assigned as source in the data property.
Inside the changed event handler of the jQuery jsTree plugin, an array of JSON objects is generated and is serialized and saved in the Hidden Field.
The Button has been assigned with a jQuery click event handler.
Inside this event handler, the selected item of jsTree will be displayed using JavaScript Alert Message Box.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script type="text/javascript">
    $(function () {
        var json = [
            { "id": "1", "parent": "#", "text": "Cars" },
            { "id": "2", "parent": "#", "text": "Bikes" },
            { "id": "1-1", "parent": "1", "text": "Alto" },
            { "id": "1-2", "parent": "1", "text": "WagonR" },
            { "id": "1-3", "parent": "1", "text": "Scorpio" },
            { "id": "1-4", "parent": "1", "text": "Duster" },
            { "id": "2-5", "parent": "2", "text": "Discover" },
            { "id": "2-6", "parent": "2", "text": "Avenger" },
            { "id": "2-7", "parent": "2", "text": "Unicorn" },
            { "id": "2-8", "parent": "2", "text": "Karizma" }
        ];
        $('#jstree').on('changed.jstree', function (e, data) {
            var i, j;
            var selectedItems = [];
            for (i = 0, j = data.selected.length; i < j; i++) {
 
                //Fetch the Id.
                var id = data.selected[i];
 
                //Remove the ParentId.
                if (id.indexOf('-') != -1) {
                    id = id.split("-")[1];
                }
 
                //Add the Node to the JSON Array.
                selectedItems.push({
                    text: data.instance.get_node(data.selected[i]).text,
                    id: id,
                    parent: data.selected[i].split("-")[0]
                });
            }
 
            //Serialize the JSON Array and save in HiddenField.
            $('#selectedItems').val(JSON.stringify(selectedItems));
        }).jstree({
            "core": {
                "themes": { "variant": "large" },
                "data": json
            },
            "checkbox": { "keep_selected_style": false },
            "plugins": ["wholerow", "checkbox"]
        });
    });
 
    $("#btnSubmit").click(function () {
        alert($('#selectedItems').val());
    });   
</script>
 
 
Screenshot
Populate JSTree in HTML
 
 
Demo
View Demo
 
 
Downloads
Download Code