Home

The primary motivation for writing this plugin was to accommodate the scenario of a hierarchical graph of data that a user must select items from. Common cascading select solutions typically work best with a know set of data or a know number of levels. In this case the cascading must respond to variable levels of nesting, dynamically creating and removing selects from the DOM in response to user input.

In the future the plugin may be expanded to accommodate any number of cascading select scenarios, or more generally, cascading elements.

Example usage can be found in the project’s unit tests folder. A simple example is included here for convenience.

$("select").cascading({
     // return a url based on the last selected value
     url: function(val) {
          return 'my/url/' + val;
     },

     // ...or, pass a format string
     url: "/my/url/{0}",

     // respond to the value changing
     onValueChanged: function(elem, val, text, oldVal, oldText) {
          // do something
     },

     // causes the selects to slide in and out (in sequence) 
     // as they are added and removed.  default=false
     animate: true,

     // custom hide and show functions can be defined, 
     // which overwrite the default animate behavior
     // the callbacks MUST be called when the animation is complete
     hide: function(elem, callback) {
          // hide elem and then invoke callback
     },
     show: function(elem, callback) {
          // show elem and then invoke callback
     }
});

Please leave questions or comments.