hide options instead of removing

I have about 5 drop downs on a page.
Each drop down is based upon the drop down before it.
So, if you select something in the first one, it must remove/hide options in the 2nd one.
At the moment I have some code that deletes options in the 2nd drop down but all I want to do is hide them so that if the user clicks back, the options would reappear.
Is there a way to do this?

...or would I be better setting up a javascript array when the page loads from the SQL data and using the array each time?


function fillDivisionalLevels() {
if (document.getElementById("DivisionalLevels").disabled==false) {
//reset to top
document.getElementById("DivisionalLevels").selectedIndex=0;

//get relevant levels
var count;
var removedCount = 0;
var listBoxCount = document.getElementById("DivisionalLevels").options.length;
var val = document.getElementById("Division").value;
var divisionID = val.substring(0,1);
for(count = 0; count < listBoxCount; count++){
var divisionalLevel = document.getElementById("DivisionalLevels").options[count - removedCount].value;
var divisionalLevelID = divisionalLevel.substring(0,1);
if (divisionID != divisionalLevelID && divisionalLevelID != "0" && divisionalLevelID != "default") {//leave in 0 i.e. all levels
document.getElementById("DivisionalLevels").remove(count - removedCount);
removedCount++;
}
}

//call other drop downs
fillBusUnitLevels();
fillRegionalLevels();
fillCostCentres();//option boxes should have multiple values
}
}

i would set up a javascript array to hold the different combos, it may even be possible to hold the details all in one array and produce an array that holds the rules that display the correct values.