VB combo box behaviour in HTML

[ross]

A couple of times I have had to implement a VB style combo box (i.e.
text entry or drop down selection) under IE. I keep having to recreate
the following code from scratch, so I thought I'd post it here to help
myself and possibly others in the future.

....
<span style="width:100px; height:22px;">
<input id="text1" type="text" value="parrot"
style="width:100px; position:absolute; z-index:3;" />
<select style="width:100px; position:absolute; z-index:1;"
onmousedown="for (var i = options.length; i > 0 && text1.value !=
options[--i].text;); selectedIndex = i;"
onchange="text1.value = options[selectedIndex].text;">
<option />
<option>cat</option>
<option>dog</option>
</select>
<iframe frameborder="no" scrolling="no"
style="width:82px; height: 100%; position:absolute;
z-index:2;"></iframe>
&nbsp;
</span>
....

The "control" works with standard font sizes, and obeys in-line
placement rules.

The iframe serves to mask the text area of the windowed select element
(which otherwise doesn't obey its z-index).

The &nbsp; seems to be required with IE to give correct vertical
alignment to the span.

The next improvement would be to script the width settings from the
containing span, and adapt it for multi-browser (presumably with
various factors for the drop-button width). Maybe someone else might do
this and repost.

///