A simple example is to, given a list of states, populate a list of cities from an external data source for the selected state.  Here is another user attempting to do precisely that:

http://groups.google.com/group/jquery-en/browse_frm/thread/3896512339227b8d/a1827bf0b3f5e612?lnk=gst&q=cascade#a1827bf0b3f5e612

When I attempt to use the code given in the response, however, the cascade does not appear to trigger.  I'm no JavaScript nor jQuery expert, so I'm hoping somebody may be able to shed some light on how this should be done.

Below is an example of what I'm trying to do.  Note that it does not work, even using a list instead of an external data source for the cascades.

Full code posted here:  http://gist.github.com/374179

Here's the JS:

1. <script type="text/javascript">
2.     // Set up dropdown menu items for Cascade
3.     var az_list = [
4.         {'When':'AZ','Value':'Phoenix','Text':'Phoenix'},
5.         {'When':'AZ','Value':'Tucson','Text':'Tucson'},
6.     ];
7.     var ca_list = [
8.         {'When':'CA','Value':'San Francisco','Text':'San Francisco'},
9.         {'When':'CA','Value':'Los Angeles','Text':'Los Angeles'},
10.     ];
11.     
12.     // Set up some common stuff for Cascade
13.     function commonTemplate(item) {return '<option value="' + item.Value + '">' + item.Text + '</option>';};  
14.     function commonMatch(selectedValue) {return this.When == selectedValue;};
15.     
16.     var defaultCascade = {
17.         template: commonTemplate,
18.         match: commonMatch,
19.         event: 'state.changed' //custom event type
20.     };
21.     
22.     // Set up Cascade definitions
23.     var az_cascade = $.extend({},defaultCascade,{ list: az_list });
24.     var ca_cascade = $.extend({},defaultCascade,{ list: ca_list });
25.         
26.      $(document).ready(function() {
27.         $('#state').change(function() { 
28.             switch($('#state').val()) {
29.                 case 'AZ':
30.                     $('#city').cascade('#state',az_cascade);
31.                     break
32.                 case 'CA':
33.                     $('#city').cascade('#state',ca_cascade);
34.                     break
35.                 default:
36.                     alert('please select a state');
37.             }
38.             // Trigger that custom event
39.             $('#dimension_value').trigger('state.changed');
40.         });
41.     });
42. </script>

And the HTML:

1. <form>    
2.     state
3.     <select id="state">
4.         <option value="">--Select--</option>
5.         <option value="AZ">Arizona</option>
6.         <option value="CA">California</option>
7.     </select><br/>
8.     
9.     city
10.     <select id="city"></select>
11. </form>

Thanks in advance!

-Mike Babineau