//Applies cascading behavior for the specified dropdowns
function applyCascadingDropdown(sourceId, targetId, targetId2, targetId3) {
    var source = document.getElementById(sourceId);
    var target = document.getElementById(targetId);
	var target2 = document.getElementById(targetId2);
	var target3 = document.getElementById(targetId3);
    if (source && target && target2 && target3) {
        source.onchange = function() {
            displayOptionItemsByClass(target, source.value);
			displayOptionItemsByClass(target2, source.value);
			displayOptionItemsByClass(target3, source.value);
        }
        displayOptionItemsByClass(target, source.value);
		displayOptionItemsByClass(target2, source.value);
		displayOptionItemsByClass(target3, source.value);
    }
}
//Displays a subset of a dropdown's options
function displayOptionItemsByClass(selectElement, className) {
    if (!selectElement.backup) {
        selectElement.backup = selectElement.cloneNode(true);
    }
    var options = selectElement.getElementsByTagName("option");
    for(var i=0, length=options.length; i<length; i++) {
        selectElement.removeChild(options[0]);
    }
    var options = selectElement.backup.getElementsByTagName("option");
    for(var i=0, length=options.length; i<length; i++) {
        if (options[i].className==className)
            selectElement.appendChild(options[i].cloneNode(true));
    }
}
//Binds dropdowns
function applyCascadingDropdowns() {
	applyCascadingDropdown("aaa", "bbb", "ccc", "ddd");
	//applyCascadingDropdown("items", "prices");
    //We could even bind items to another dropdown
    //applyCascadingDropdown("items", "foo");
}
//execute when the page is ready
window.onload=applyCascadingDropdowns;