mbabineau/cascade.html

## cascade.html
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.cascade.js"></script>
<script type="text/javascript" src="/static/js/jquery.templating.js"></script>
<script type="text/javascript">
    // Set up dropdown menu items for Cascade
    var az_list = [
        {'When':'AZ','Value':'Phoenix','Text':'Phoenix'},
        {'When':'AZ','Value':'Tucson','Text':'Tucson'},
    ];
    var ca_list = [
        {'When':'CA','Value':'San Francisco','Text':'San Francisco'},
        {'When':'CA','Value':'Los Angeles','Text':'Los Angeles'},
    ];

    // Set up some common stuff for Cascade
    function commonTemplate(item) {return '<option value="' + item.Value + '">' + item.Text + '</option>';};
    function commonMatch(selectedValue) {return this.When == selectedValue;};

    var defaultCascade = {
        template: commonTemplate,
        match: commonMatch,
        event: 'state.changed' //custom event type
    };

    // Set up Cascade definitions
    var az_cascade = $.extend({},defaultCascade,{ list: az_list });
    var ca_cascade = $.extend({},defaultCascade,{ list: ca_list });

     $(document).ready(function() {
        $('#state').change(function() {
            switch($('#state').val()) {
                case 'AZ':
                    $('#city').cascade('#state',az_cascade);
                    break
                case 'CA':
                    $('#city').cascade('#state',ca_cascade);
                    break
                default:
                    alert('please select a state');
            }
            // Trigger that custom event
            $('#dimension_value').trigger('state.changed');
        });
    });
</script>
</head>

<body>
<form>
    state
    <select id="state">
        <option value="">--Select--</option>
        <option value="AZ">Arizona</option>
        <option value="CA">California</option>
    </select><br/>

    city
    <select id="city"></select>
</form>
</body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="/static/js/jquery.cascade.js"></script>
	<script type="text/javascript" src="/static/js/jquery.templating.js"></script>
	<script type="text/javascript">
	// Set up dropdown menu items for Cascade
	var az_list = [
	{'When':'AZ','Value':'Phoenix','Text':'Phoenix'},
	{'When':'AZ','Value':'Tucson','Text':'Tucson'},
	];
	var ca_list = [
	{'When':'CA','Value':'San Francisco','Text':'San Francisco'},
	{'When':'CA','Value':'Los Angeles','Text':'Los Angeles'},
	];

	// Set up some common stuff for Cascade
	function commonTemplate(item) {return '<option value="' + item.Value + '">' + item.Text + '</option>';};
	function commonMatch(selectedValue) {return this.When == selectedValue;};

	var defaultCascade = {
	template: commonTemplate,
	match: commonMatch,
	event: 'state.changed' //custom event type
	};

	// Set up Cascade definitions
	var az_cascade = $.extend({},defaultCascade,{ list: az_list });
	var ca_cascade = $.extend({},defaultCascade,{ list: ca_list });

	$(document).ready(function() {
	$('#state').change(function() {
	switch($('#state').val()) {
	case 'AZ':
	$('#city').cascade('#state',az_cascade);
	break
	case 'CA':
	$('#city').cascade('#state',ca_cascade);
	break
	default:
	alert('please select a state');
	}
	// Trigger that custom event
	$('#dimension_value').trigger('state.changed');
	});
	});
	</script>
	</head>

	<body>
	<form>
	state
	<select id="state">
	<option value="">--Select--</option>
	<option value="AZ">Arizona</option>
	<option value="CA">California</option>
	</select><br/>

	city
	<select id="city"></select>
	</form>
	</body>
	</html>