This example shows how not to use a
<select> element for navigation, by triggering it
from the element's change event.
When using a <select> element with the keyboard,
the Up and Down arrow keys are used to move
through the options. But with this interaction, the change
event is fired after every key-press, so if navigation is
bound to the change event, it will be impossible to select
any option but the first.
Some browsers have implemented their own fixes for this issue —
for example, in the latest version of Firefox you have to press
Enter to trigger the change event. But this
can't be considered sufficient, because it only applies to a minority
of browsers.
The correct way to do this is to have a separate GO
button,
then trigger the change of context from its click event.
Tab to the element below, then use the Down arrow key to move through the options. As soon as the first is selected (in most browsers) a new page will begin to load, making it impossible to select any of the lower options:
The JavaScript code for this example can be found in: JS_N_A4.js