jQuery TreeSelect widget
This widget is used for transforming a hierarchy HTML lists with input's into a hierarchial tree select tool. You can also call this widget with a structured JSON list and it will convert it to an HTML hierarchy select tool of those items.
Live Example
Go to http://travist.github.com/jquery.treeselect.js to see a live demo of this widget!
Usage
<html> <head> <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script> <script type='text/javascript' src='lib/jquery.moreorless.js/jquery.moreorless.js'></script> <script type='text/javascript' src='js/jquery.treeselect.js'></script> <script type='text/javascript' src='js/jquery.chosentree.js'></script> <link rel='stylesheet' type='text/css' href='lib/jquery.moreorless.js/moreorless.css' /> <link rel='stylesheet' type='text/css' href='css/treeselect.css' /> <link rel='stylesheet' type='text/css' href='css/chosen.css' /> <script type='text/javascript'> jQuery(function() { $('div.chosentree').chosentree({ width: 500, deepLoad: true, load: function(node, callback) { /** * This would typically call jQuery.ajax to load a new node * on your server where you would return the tree structure * for the provided node. */ } }); }); </script> </head> <body> <div class="chosentree"></div> </body> </html>