Get list of checked node IDs of jstree

jquery jstree

12,952

The problem is in this place .attr('id'). It returns only 1st id. You should use each() to fill your array:

var arr = new Array();
$("#testtree").jstree('get_selected').each(function(index) {
arr.push($(this).attr('id'));
});

UPD:

Selected items are those you select/highlight. You need checked items. So the code will be

var arr = new Array();
$("#testtree").jstree('get_checked').each(function(index) {
arr.push($(this).attr('id'));
});

I've created a jsfiddle http://jsfiddle.net/J5ZaK/123/

12,952

Author by

atreju

This user prefers to keep an air of mystery about them

Updated on June 04, 2022

Comments

atreju about 2 years

I'm new to jstree and jQuery and have a little problem with node checking in my test tree.

The user should first check the nodes he needs, then click on the "Summary" button to get a list of the IDs of the checked nodes in an alert window. I also want to export a list of the IDs for further use in a cgi file.

This is my code:

<!doctype html>
<html>
<head>
    <title>jstree test</title>
</head>
<body>
    <div id="testtree">
        <ul>
            <li id="1" title="ID:1"><a>Fruits and Vegetables</a>
              <ul>
            <li id="11" title="ID:11"><a>Fruit</a>
                  <ul>
                    <li id="111" title="ID:111"><a>Apple</a></li>
                    <li id="112" title="ID:112"><a>Banana</a></li>
                  </ul>
                </li>
            <li id="12" title="ID:12"><a>Vegetables</a>
                  <ul>
                    <li id="121" title="ID:121"><a>Zucchini</a></li>
                    <li id="122" title="ID:122"><a>Tomato</a>
                         <ul>
                            <li id="1221" title="ID:1221"><a>Red Tomato</a></li>
                            <li id="1222" title="ID:1222"><a>Green Tomato</a></li>
                        </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
         </ul>
    </div>
    <button>Summary</button>
    <script type="text/javascript" src="_lib/jquery.js"></script>
    <script type="text/javascript" src="jquery.jstree.js"></script>
    <script>

        $(document).ready(function() {

            var checked_ids = []; // list for the checked IDs

            $("#testtree").jstree({
                "plugins" : [ "themes", "html_data", "checkbox", "ui" ]
            });

        })

        var button = document.querySelector( "button" );

        // If the user clicks on the button, show him the IDs of the checked fruits/vegetables:
        button.addEventListener( "click", function( ev ) {
            alert( "Your Selection: ");
        }, false);

    </script>
</body>
</html>

Any suggestions how I can do this?

Update 1:

I tried to use Brad's solution from the other post but I still can't get it working because I don't know how to add the IDs to the array.

This is my new code:

<script>

    var checked_ids = [];

    $(document).ready(function() {

        $("#testtree").jstree({
            "plugins" : [ "themes", "html_data", "checkbox", "ui" ]
        });

        // How do I add the IDs to the array?
        $("#testtree").jstree('get_selected').attr('id')

    })

    var button = document.querySelector( "button" );

    // If the user clicks on the button, show him the IDs of the checked fruits/vegetables:
    button.addEventListener( "click", function( ev ) {
        alert("Your Selection: "+ checked_ids.join("\n"));
    }, false);

</script>

Any help would be appreciated.

Update 2:

The array still doesn't get filled:

<button>Summary</button>
<script type="text/javascript" src="_lib/jquery.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
<script>

    $(document).ready(function() {

        $("#testtree").jstree({
            "plugins" : [ "themes", "html_data", "checkbox", "ui" ]
        });

        var arr = new Array();

        $("#testtree").jstree('get_checked').each(function(index) {
        arr.push($(this).attr('id'));
        });

        var button = document.querySelector( "button" );

        button.addEventListener( "click", function( ev ) {
            alert("Your Selection: "+ arr.length + " " + arr[0] + " " + arr[1]);
        }, false);

    })
</script>