We’ve all been there. You need to use a Combo box on your web form, but there are none. So you either have to settle for a textbox or a select widget. Or, at best, put them both on your form and allow the user to select which one to use. Of course, this only confuses most users.

What we need is a real combo box that works in a way that is not confusing to your readers. Something like this:

Closed	Open

So, first off we need a form with a textbox and a select in it. Something like this should work:

<form name="editform" onSubmit="return false";>
<table>
<tr>
<td>
<input type="text" id="mycombo" name="mycombo" value="" />
</td>
<td>
<a href="">...</a>
</td>
</tr>
<tr>
<td colspan="2">
<div id="mycombo_combo" style="position:absolute; visibility: hidden;">
<select size="10">
<option value="Republican">Republican</option>
<option value="Democrat">Democrat</option>
<option value="Green Party">Green Party</option>
<option value="Communist">Communist</option>
<option value="Hippy">Hippy</option>
<option value="More Data1">More Data1</option>
<option value="More Data2">More Data2</option>
<option value="More Data3">More Data3</option>
<option value="More Data4">More Data4</option>
<option value="More Data5">More Data5</option>
<option value="More Data6">More Data6</option>
</select>
</div>
</td>
</tr>
</table>
</form>

Okay, now we have our form, but it doesn’t do anything. The select box isn’t visible and when you click on the dots nothing happens. We need to throw some javascript into the mix. First lets make the dots actually do something useful (like making the select box visible). We’ll need to create a function that does this:

<script>
function showObject( object_id, object_visible )
{
if( object_visible == 1 )
{
document.getElementById( object_id ).style.visibility = 'visible';
} else {
document.getElementById( object_id ).style.visibility = 'hidden';
}
}
</script>

And we’ll need to modify the link around the dots to use the above function. Let’s change that line to look like this:

<a href="javascript:showObject('mycombo_combo',1)">...</a>

Great! Now our combo box looks like it should, but clicking on the select doesn’t put the value back into the textbox like you would expect. So, what we need is to add an “onchange” element to the selection list’s properties. While we are at it we also want to make the “onchange” on the select force an “onchange” event on the text box, so we’ll need another function:

<script>
function forceEvent( obj, evtType )
{
var forceFunction = new Function( obj.getAttribute( 'on' + evtType ) );
forceFunction( );
}
</script>

And then we’ll need to add both of our functions to the “onchange” element in the select box:

<select size="10" onchange="document.editform.mycombo.value=this.options[this.selectedIndex].value; showObject('mycombo_combo',0); forceEvent(document.editform.mycombo,'change');">


Fantastic! Now we have a working combo box.

If you want to get fancy you can replace the dots with an image that looks more like what users are used to. You could also have the select statement open automatically and remove elements from the select list as the user types, which would be good for very long lists. Good luck!