Plugin homepage & short introduction: http://code.google.com/p/jquery-option-tree/
See also: blog posts about the plugin
<input type="text" name="demo1" />
var option_tree = {
"Option 1": {"Suboption":200},
"Option 2": {"Suboption 2": {"Subsub 1":201, "Subsub 2":202},
"Suboption 3": {"Subsub 3":203, "Subsub 4":204, "Subsub 5":205}
}
};
$('input[name=demo1]').optionTree(option_tree);
<input type="hidden" name="demo2" />
var option_tree = {
"Option 1": {"Suboption":200},
"Option 2": {"Suboption 2": {"Subsub 1":201, "Subsub 2":202},
"Suboption 3": {"Subsub 3":203, "Subsub 4":204, "Subsub 5":205}
}
};
var options = {empty_value: -1, choose: '...'};
$('input[name=demo2]').optionTree(option_tree, options)
.change(function() { alert('Field ' + this.name + ' = ' + this.value )});
<input type="hidden" name="demo3" />
var option_tree = {
"Red": {"Default":100},
"Blue": {"Variant 1": {"Default":100, "Another":101},
"Variant 2": {"Default":100, "Another":102, "and another":103}
}
};
var options = {preselect: {'demo3': "Default"}}; // value for default option (include field name)
$('input[name=demo3]').optionTree(option_tree, options)
.change(function() { alert('Field ' + this.name + ' = ' + this.value )});
<div>
<input type="hidden" name="demo4" />
</div>
var option_tree = {
"Red": {"Default":100},
"Blue": {"Variant 1": {"Default":100, "Another":101},
"Variant 2": {"Default":100, "Another":102, "and another":103}
}
};
var options = {select_class: 'vertical'}; // CSS class for select elements
/*
Displays string with current labels for each select element separated with ' '
*/
var displayParents = function() {
var labels = []; // initialize array
$(this).siblings('select') // find all select
.find(':selected') // and their current options
.each(function() { labels.push($(this).text()); }); // and add option text to array
alert(labels.join(' ')); // and display the labels
}
$('input[name=demo4]').optionTree(option_tree, options)
.change(displayParents);
<div>
<input type="text" name="demo5" />
</div>
<div class="results" id="demo5-result"></div>
<script type="text/javascript">
$(function() {
var options = {
empty_value: 'null',
indexed: true, // the data in tree is indexed by values (ids), not by labels
on_each_change: 'get-subtree.php', // this file will be called with 'id' parameter, JSON data must be returned
choose: function(level) {
return 'Choose level ' + level;
},
preselect: {'demo5': ['220','226']} // array of default values - if on any level option value will be in this list, it will be selected
// be careful of variable types - '111' !== 111
};
var displayParents = function() {
var labels = []; // initialize array
$(this).siblings('select') // find all select
.find(':selected') // and their current options
.each(function() { labels.push($(this).text()); }); // and add option text to array
$('').text(this.value + ':' + labels.join(' > ')).appendTo('#demo5-result'); // and display the labels
}
$.getJSON('get-subtree.php', function(tree) { // initialize the tree by loading the file first
$('input[name=demo5]').optionTree(tree, options).change(displayParents);
});
});
</script>
Example 6 - AJAX lazy loading & setting value on each level change
This requires a HTTP server with PHP installed to work!
<div>
<input type="text" name="demo6" />
</div>
<div class="results" id="demo6-result"></div>
<script type="text/javascript">
$(function() {
var options = {
empty_value: 'null',
indexed: true, // the data in tree is indexed by values (ids), not by labels
on_each_change: 'get-subtree.php', // this file will be called with 'id' parameter, JSON data must be returned
set_value_on: 'each', // we will change input value when every select box changes
choose: function(level) {
return 'Choose level ' + level;
},
preselect: {'demo6': ['220','226']}, // array of default values - if on any level option value will be in this list, it will be selected
// be careful of variable types - '111' !== 111
preselect_only_once: true, // prevent auto selecting whole branch when user maniputales one of branch levels
get_parent_value_if_empty: true,
attr: "id" // we'll use input id instead of name
};
var displayParents = function() {
var labels = []; // initialize array
$(this).siblings('select') // find all select
.find(':selected') // and their current options
.each(function() { labels.push($(this).text()); }); // and add option text to array
$('').text(this.value + ':' + labels.join(' > ')).appendTo('#demo6-result'); // and display the labels
}
$.getJSON('get-subtree.php', function(tree) { // initialize the tree by loading the file first
$('input[name=demo6]').optionTree(tree, options).change(displayParents);
});
});
</script>
Example 7 - select size > 1 & load animation
This requires a HTTP server with PHP installed to work!
<div>
<input type="text" name="demo7" />
</div>
<div class="results" id="demo7-result"></div>
<script type="text/javascript">
$(function() {
var options = {
empty_value: 'null',
indexed: true, // the data in tree is indexed by values (ids), not by labels
on_each_change: 'get-subtree.php', // this file will be called with 'id' parameter, JSON data must be returned
choose: function(level) {
return 'Choose level ' + level;
},
loading_image: 'ajax-load.gif',
show_multiple: 10, // if true - will set the size to show all options
choose: '' // no choose item
};
var displayParents = function() {
var labels = []; // initialize array
$(this).siblings('select') // find all select
.find(':selected') // and their current options
.each(function() { labels.push($(this).text()); }); // and add option text to array
$('<div>').text(this.value + ':' + labels.join(' > ')).appendTo('#demo7-result'); // and display the labels
}
$.getJSON('get-subtree.php', function(tree) { // initialize the tree by loading the file first
$('input[name=demo7]').optionTree(tree, options).change(displayParents);
});
});
</script>