Question

I have a web page with many select boxes, which should each contain the same set of options. The idea is that the user is given a list of items and has to select the matching option for each from another list.

Since the lists are both several hundred items long, loading all the options into each selection box is slow. Also, most of the items are automatically matched to an option to begin with, and the user only needs to skim through and make sure they are correct, so most of the select boxes will never be opened.

What I ideally want is a method of populating the options for each select box only when it is opened. This would mean I could populate the options for the few items which are not matched automatically using onload and only populate the rest as they are needed.

Is it possible to add options to the select boxes as they are opened?

Answer 1

You can try and start with empty selects add the options using the onfocus event and if the select has 0 options add them.

Here is a example