jquery.treeselect.js's Introduction

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>

Recommend Projects