Select Option Element.hide(); not working in Safari/Opera? Firefox is fine.

[lt]

Hi all,

I'm simply wanting to hide all select options rather than removing it
(thus, Element.hide() instead of remove()).

Here's the snippet of code: $$('select option').each(function(elem)
{ elem.hide(); });

I've also tried adding a class of .notActive
{ display:none; }, .notActive { visibility:hidden; } and I haven't
gotten it to work properly yet in Safari or Opera. Haven't tried in IE
7+ yet, though Firefox 3+ works (all on Mac OS X).

Any thoughts here?

Thanks...

[Walter Lee Davis]

The options cannot be hidden like this. If you are interested in
making the picker non-functional, you could simply disable the select
element with disable(). If you want to remove the options and put them
back later you could try caching them first and then setting the
element's options.length property to 0. That will remove all options
from the select without removing the select itself.

Walter

[david]

Hi it,

just one remark on the code show.
Instead of using $$('select option').each(function(elem) { elem.hide
(); });
and create a closure, you should use:
$$('select option').invoke('hide'); because the return of the $$
function is an array and array are extended with the GREAT enumerable
method.

--
david

[Walter Lee Davis]

An excellent point, however hiding the options in a select won't do
anything useful. They don't each get their own display property in CSS.

But you're right about using invoke. If this was a collection of
checkboxes or radio buttons, then setting display like this would work
really well and invoke would be the quickest way to go.

Walter