Using "visibility" style attribute with select elements

[Dave Hammond]

I'm not sure if this is technically a javascript question, but I'm
coding in javascript, so I'll try here first.

To overlay a section of a page I typically use an absolute positioned
<div> and call insertAdjacentHTML. By raising the z-index higher than
than the underlying elements this method works fine, except if there is
a window'd element below it, such as a <select>. My understanding is
that I need to use the visbility attribute to hide the <select> before
calling insertAdjacentHTML.

Each <select> element (there are three) is identified with the ID
"select_vis". I am attempting to hide the select elements using the
following code:

selvis = document.getElementById('select_vis');
if (selvis) {
alert('gonna hide the selects.');
selvis.style.visibility = 'hidden';
}
document.body.insertAdjacentHTML('BeforeEnd', theHTML);

The code is being executed, however the three selects stay visible. Any
suggestions/observations would be greatly appreciated.

Thanks,
Dave H.

 

[Dave Hammond]

After a bit closer examination, I found that the first select was
hidden, but all others remained visible. I changed the code so that
all selects have individual IDs and now everything hides as expected.

Thanks.
-Dave H.

 

[Michael Winter]

After a bit closer examination, I found that the first select was
hidden, but all others remained visible.

That's the expected behaviour.

I changed the code so that all selects have individual IDs [...]

Good. Every id in a document /must/ be unique. You would have found
that had you validated the mark-up.

Mike