[thelist] JS: Hiding an option within a select in IE?

[Frank]

I'm trying to create menus that are somewhat contextual. If someone chooses 
the North America in a previous menu (as an example), this menu should 
display only North American countries.  It does so by hiding all the 
options in the menu other than the ones that match a certain criteria. I 
can't get IE to hide them for me.

Using style.display = 'none' works well in Moz, but fails in IE.
Using style.visibility = 'hidden' fails in IE
Using style.backgroundColor = 'blue' works in both

Can someone suggest how I might prevent certain select: options from 
displaying in IE, while permitting others to show? A reduced sample of my 
code is below.

----------------------------------------------------------------------
countries = document.getElementById('countries');

function selectCountries(selOpt)
{
         if ( an_expression != true)
          {
                 selOpt = selOpt.selectedIndex
                 //  i = selOpt - it's actually based on an array...

                 // Works in NS6+/Moz
                 countries[i].style.display = 'none';

                 // Test - does not work in IE
                 countries[i].style.visibility = 'hidden'

                 // Test - Works in both
                 countries[i].style.backgroundColor = 'blue';
         }
         else
         {
                 countries[i].style.display = 'block';
         }
}
----------------------------------------------------------------------