Preventing incorrect selection in drop-down lists

Have you noticed how often you select an item from a drop down list and then alter your selection when you use your mouse scroll wheel to move down the page?

This can have annoying consequences but is easy to solve with a little JavaScript.

How?

Add an OnChange event to the <select> tag as follows:

<form name="myForm" action=".." method = "..">

<select name="mySelect" OnChange="myForm.NextField.focus()">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

<input type="text" name="NextField" size="30" />

</form>

Notice that the 'OnChange' event refers to both the form name and the name of the next input field.
 

Examples

Try the examples below, one without this and one with it.