How to make drop down list's list items visible/invisible using client side Javascript

Hi there

I have to adjacent dropdown lists and what I want to happen is that if the user selects an item from the first, the items in the second will appear visible/invisible to the user depending on whether thet match the location the user selected in the first.

My Javascript is attached and executes without error but when but once I've selected my first drop down item, all items in the second are still visible even though the script should have made some invisible.

Code is attached.  Any help much aprreciated
Thanks Sam

function ShowAssociatedSchemes(principalMembers, schemesClientId) {
        var schemes;
        var value, locations, searchLocation
        if (principalMembers == null)
        {
            alert("Principal members drop down is null");
            return;
        }     
        
        schemes = document.getElementById(schemesClientId);
        
        if(schemes == null)
        {
            alert("Schemes drop down is null");
            return;
        }
                    
        for (var i = 0; i < schemes.options.length; i++) {
            if (principalMembers.value == "" || schemes.options[i].value == "") {
                alert("making option visible");
                schemes.options[i].style = "inline";
            }
            else {
                value = schemes.options[i].value;
                locations = value.substring(21)
                searchLocation = principalMembers.value.substring(0, 6);
                if (locations.indexOf(searchLocation) != -1) {
                    alert("making option visible");
                    schemes.options[i].style.display = "inline";
                }
                else {
                    alert("making option invisible");
                    schemes.options[i].style.display = "none";
                }     
            }        
        }
    }

Select all Open in new window