Preventing incorrect selection in drop-down lists

If you still have users with IE6 this may affect you!

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 be a serious issue if users are selecting credit card expiry dates for example.

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.