Modifying Select Lists on the Fly
from Porter's Workshop

There are a couple of "gotchas" to watch out for doing this kind of thing. First, Netscape's client-side JavaScript documentation will tell you that you need to reload the page using a history.go(0) call after you've changed the options array of the form element you're updating. However, this causes Internet Explorer to clear any values that were in any other form fields on the page, and Netscape presents only a minor quirk if you don't refresh the page -- if the select field that is being updated has fewer options in it to begin with than are put into it with the JavaScript the pull-down menu will scroll, rather than allowing all the options to be visible.

One way around this is to preload the select field with as many or more blank options than you'd need to display the largest list you'd expect that field to have. For example, you'll see that the second list below is preloaded with nine blank options because the largest list that it will need to store is nine options long. If you don't know how many options to expect, just pad the field out with several options, and worst come to worst, the list will have a scrollbar after it pulls down.

To Porter's Workshop