---
title: Javascript tree with multiple select
layout: page
js: examples/multiple_select.js
css: example.css
---
« Example 7
Example 9 »
Example 8 - multiple select
This example implements multiple select using the following functions and
events:
- addToSelection: add node to selections
- isNodeSelected: is this node selected?
- removeFromSelection: unselect this node
-
tree.click event: this event is fired when a user
clicks on a node
html
{% highlight html %}
{% endhighlight %}
javascript
{% highlight js %}
var $tree = $('#tree1');
$tree.tree({
data: ExampleData.exampleData,
autoOpen: true
});
$tree.on( 'tree.click', function(e) {
// Disable single selection
e.preventDefault();
var selected_node = e.node;
if (selected_node.id === undefined) {
console.warn('The multiple selection functions require that nodes have an id');
}
if ($tree.tree('isNodeSelected', selected_node)) {
$tree.tree('removeFromSelection', selected_node);
} else {
$tree.tree('addToSelection', selected_node);
}
}
{% endhighlight %}