Site Navigation

7. Combo Box

Strangely, HTML doesn't provide a combo box so in order to use one for our navigation we must first create one. For those of you who don't know what a combo box is, a combo box is a combination of two field types into one - the input field and the selection list. It is because it is effectively two fields combined together that it gets the name combo box.

We can't produce a proper combo box in html because we can't actually incorporate the input and selection fields into one field. The closest that we can achieve is to place the input text field immediately above the selection drop down list and use a couple of Javascript statements to get the two fields working together as a combo box. Here is an example where we want our visitor to specify the state that they live in. The drop down list includes all of the states (and the most common territiories) within Australia but the combo box also caters for visitors from outside of Australia who can manually type their state into the text field.

So how do we create the combo box? Well here's the code for the one I have above:

<div style="background:#cccccc;border:solid
1px #000000">
<input type="text" name="state" value=""
size="10" /><br />
&nbsp;&nbsp;<select name="s" size="1"
onchange="document.ex.state.value = document.ex.s.options[document.ex.s.selectedIndex]
.value;document.ex.s.value=''">
<option value=" " selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
<option value="ACT">ACT</option>
<option value="NSW">NSW</option>
<option value="NT">NT</option>
<option value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="WA">WA</option>
</select></div>

So I guess it doesn't matter too much that HTML left out the combo box from their list of form fields because you can always create your own.

The final step is to adapt the combo box so that we can use it as a Combo Navigator. We'll look at how to do this next.

Note that the script and the descriptions of the functions that it contains are rewritten from the "Ask Felgall" website with the permission of the copyright owner.