In this article I will explain with an example, how to populate jsTree in HTML.
 
 

HTML Markup

The HTML Markup consists of following elements:
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 HTML, the following CSS file is inherited.
1. style.min.css
 
And then, the following script files are inherited.
1. jquery.min.js
2. jstree.min.js
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 data source in the data property.
The jQuery jsTree plugin has been assigned with the following event handler:-

changed.jstree

Inside the changed.jstree event handler of the jQuery jsTree plugin, an Array is declared.
Then, a FOR loop is executed over the selected (checked) items of jsTree and inserted into the Array one by one.
Finally, the Array of JSON object is serialized and saved in the Hidden Field.
The Button has been assigned with a jQuery click event handler.
 

Displaying selected (checked) items

When the Submit Button is clicked, the selected items of jsTree is set in the HiddenField which 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/3.7.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