Samm1502
asked on
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
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";
}
}
}
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks!
it should be:
schemes.options[i].style.d
Generally you can combine "visibility" and "display" to hide the option for example:
.style="visibility:hidden;
.style="visibility:visibil