Mootools plugin, for build the hierarchical/dynamic select
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


mooOptionTree - it simple MooTools plugin that allow build the hierarchical/dynamic select list


  • Mootools 1.3 or height

##usage ####HTML

<div id="select-tree"></div>


  //some options configuration
  var options = {
    name: 'select_item', //default name for select
    choose: 'Choose...', //string with text if no option was selected
    empty_value: '', //what value to set the input if no valid option was selected
    request_url: null, //url for children request in JSON, will be POST request with query: mooOptionTree=1&id=PARENT_ID,
    loading_image: '', // link to image, show an ajax loading graphics (animated gif) while loading ajax (eg. /ajax-loader.gif)
    preselect: [], //array with ids of elements that selected. IMPORTANT: (3 != '3') ... 3 not the same as '3'
    labels: [], //array of labels for each level
    instant_init: true // whether build selects in initialisation time or init later using init()
  //object that contain information about first <select>, in format 'id':'Title'
  var base_select_tree = {
    '1':'Title one',
    '2':'Title two'

  //object that contain information about tree of selects, in format 'parent_id':{'child_id':'child Title'}
  //it is not required if you specified "request_url" in options, that will be used for JSON request
  //also with "request_url" it can be used as pre cached info 
  var select_tree = {
    '1':{'3':'Title for 3','4':'Title for 4'},
    '2':{'5':'Title for 5','6':'Title for 6'},
    '6':{'10':'Title for 10','33':'Title for 33'}
    //and so on
  var tree = new mooOptionTree('select-tree', options, base_select_tree, select_tree);
  //change event
    var id = changed.get('value');
    alert('Selected id is: ' + id);
  //reset selected items, back to init state
  //for full reset, with cleare preselected use resetTree(true) 
  //if you have preselected items and want use "changed" event, 
  //then better use init manualy:
  options.instant_init = false;
  var tree = ...
  tree.addEvent('changed',function(changed){ ... });
  //init manualy