---
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 %}
$(function() {
var $tree = $('#tree1');
$tree.tree({
data: ExampleData.example_data,
autoOpen: true
});
$tree.bind(
'tree.click',
function(e) {
// Disable single selection
e.preventDefault();
var selected_node = e.node;
if (selected_node.id == undefined) {
console.log('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 %}