I have a bunch of Drop Down Lists that looks like this:

Code:
<select size='1' name='GAGETYPE' onChange="show('invisibleGAGETYPE', this.options[this.selectedIndex].firstChild.nodeValue)">
  <option selected>First Option</option>
  <option>Second</option>
  <option>Third</option>
  <option>Other</option>
</select>

<span id='invisibleGAGETYPE'>
  <input type='text' name='GAGETYPEother'>
</span>
The javascript function is this:
Code:
function show(el, txt){
var elem = document.getElementById(el);
elem.style.visibility = (txt == 'Other') ? 'visible' : 'hidden';
}
And the CSS is this:
Code:
<style>
#invisibleGAGETYPE {visibility: hidden;} 
</style>
It works great. Here's what it does:
The text box is hidden.
If the default option is not "Other",
whenever you change the option in the drop down list to "Other",
the Text Box appears.

When you change it off of "Other",
the text box dissapears again.

That's great - but I also need it so that if the default
field *is* "Other" that the text box will default to be Visible, but if the drop down list is changed to something
besides Other, it will become invisible.

I tried something like:
Code:
<select size='1' name='GAGETYPE' onChange="show('invisibleGAGETYPE', this.options[this.selectedIndex].firstChild.nodeValue)" onLoad="show('invisibleGAGETYPE', this.options[this.selectedIndex].firstChild.nodeValue)">
But of course it didn't work.

Anyone?

Thanks a lot.