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";
                }     
            }        
        }
    }

Open in new window

Samm1502Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Bane83Commented:
Unfortunately, dropdowns don't allow for many CSS changes.  You can do some very basic things like font changes, but you can't apply visibility CSS to specific items.

The way around this is to place your dropdown items in an array and add/remove items to your second dropdown from this array based on your criteria.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
profyaCommented:
Line 21:  schemes.options[i].style = "inline";
it should be:
 schemes.options[i].style.display = "inline";

Generally you can combine "visibility" and "display" to hide the option for example:
.style="visibility:hidden; display:inline;"
.style="visibility:visibile; display:none;"
0
Samm1502Author Commented:
Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.