View Single Post
 
Old September 20th, 2004, 03:43 AM
ChrisScott ChrisScott is offline
Friend of Wrox
 
Join Date: Jul 2003
Location: , , United Kingdom.
Posts: 683
Thanks: 0
Thanked 1 Time in 1 Post
Default

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>