mbabineau · April 21, 2010 18:07
diff --git a/cascade.html b/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>