Hi Larry,
I think this should get you started...
Code:
<html>
<head>
<title></title>
<script type="text/javascript">
function Init(){
// populate the boxes & wire up onchange handler
var f = document.forms[0];
for(var i = 1; i <= 5; i++){
var select = f["Select" + i];
select.options.add(new Option());
for(var j = 1; j <= 5; j++){
select.options.add(new Option("Option " + j, j));
}
f["Select" + i].onchange = new Function("RestrictOptions(this);");
}
}
function RestrictOptions(pSelect){
// work out which select was changed & update those lower down the chain
var selectedValue = pSelect[pSelect.selectedIndex].value;
var selectNum = parseInt(pSelect.id.replace(/\D/g, ""), 10);
var f = document.forms[0];
for(var i = selectNum + 1; i <=5; i++){
var select = f["Select" + i];
for(var j = 0; j < select.options.length; j++){
if(select.options[j].value == selectedValue){
select.remove(j);
}
}
}
pSelect.disabled = true;
}
</script>
</head>
<body onload="Init();">
<form id="myForm">
<select id="Select1"></select>
<select id="Select2"></select>
<select id="Select3"></select>
<select id="Select4"></select>
<select id="Select5"></select>
</form>
</body>
</html>
Menu / Dropdown List Selection Reduction
