How do I scroll a SELECT MULTIPLE input / listbox so that the SELECTED OPTION is visible?

We are building a search form with a SELECT MULTIPLE input / listbox (whatever you want to call it) with a list of User ID's in alphabetical order.

Since usually, in this particular application, the user will be searching for records which they created, when we generate the list of OPTION tags from the database we set the SELECTED attribute for the current user ID (which we store in a Session variable). That is all fine and good, but if the user's name starts with "Z", their ID will appear at the end of the list and it won't be visible.

So how do we scroll the list, without knowing in advance which OPTION will be selected, so that the SELECTED OPTION is visible?

Solution

The solution involves the little script below. This script assumes that your FORM is named "form1" and the SELECT MULTIPLE that you want to scroll is called "select2" but change these as necessary.

Troubleshooting

After much playing around with this script and it NOT working, I realized the problem was in the placement. You have to have the script at the very end of the page, outside of any forms, tables etc. This is likely because the browser has to render the whole page before it can start jumping around in the form fields and highlighting things. Also it is interesting to note that the SCROLLTOP property of the SELECT does not seem to have any effect, e.g. trying something like:

document.form1.select2.scrollTop=99