##info

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

##requires

• Mootools 1.3 or height

##usage ####HTML

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

####JavaScript

window.addEvent('domready',function(){//some options configurationvaroptions={name: 'select_item',//default name for selectchoose: 'Choose...',//string with text if no option was selectedempty_value: '',//what value to set the input if no valid option was selectedrequest_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 levelinstant_init: true// whether build selects in initialisation time or init later using init()};//object that contain information about first <select>, in format 'id':'Title'//REQUIREDvarbase_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 varselect_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};//initialisation vartree=newmooOptionTree('select-tree',options,base_select_tree,select_tree);//change eventtree.addEvent('changed',function(changed){varid=changed.get('value');alert('Selected id is: '+id);});//reset selected items, back to init state//for full reset, with cleare preselected use resetTree(true) tree.resetTree()//if you have preselected items and want use "changed" event, //then better use init manualy:....
options.instant_init=false;
.....vartree= ...
...
tree.addEvent('changed',function(changed){ ... });//init manualytree.init();});