Find creative alternatives to oversized dropdown lists (CSS)

Typically, to provide users with a list of valid responses for an HTML form, you might create a dropdown list, using the <select> and <option> tags. This method works beautifully for short, static lists with average-length selection values. It's easy to code, easy to use, and allows you to supply multiple options for the user without excess clutter or unnecessary reloading of the page.

However, if you use a dropdown list for a really large set of values, you may create more usability problems than you solve. For instance, an excess of <option> elements on your page will make it take longer to load. Of course, a few dropdown lists with 50 or 60 options each won't have much impact on loading times, but several lists on a page with thousands of options each will have a noticeable impact. And, if you must change what's on the list for any reason, then a page reload may be necessary, unless you load all that additional data into some hidden list.

Very large dropdown lists can also be unwieldy just from a scrolling standpoint. Even a moderate-length list can annoy users if they need to scroll down the alphabet to the letter U instead of just typing a few simple letters, such as U.S.A.

Finally, if the individual values are long or contain several columns of data, using dropdown lists can make your page busy and unattractive. Here, the problem isn't so much with the basic functionality of dropdown lists, but with their lack of customizability.

Alternatives to large dropdown lists

Don't get us wrong—we aren't against dropdown lists. We just think that sometimes you should consider other alternatives. Here are three that can help you get around problems with oversized dropdown lists:

1. For large values or multi-column data like that shown in the figure, you might consider creating your own custom scrollable list. Just make an HTML table with check boxes or radio buttons inside a scrolling element (e.g., a <div> element with the CSS overflow set to scroll or auto). You can also achieve a similar effect with <iframe> elements. In addition, you may want to combine absolute positioning with some kind of event-triggered modification of height property to mimic the dropdown effect.
2. Combine a regular text box with a dropdown list. This alternative can range from low-tech to fancier solutions. On the low-tech end, just include both the <input> and <select> elements, and make clear in the instructions that the user has a choice. You'll probably want to use JavaScript to make sure that the user's choice automatically appears in each element. On the other hand, to avoid confusion caused by multiple ways of entering data, consider having only the text box show, and using JavaScript to automatically fill in the rest of the response. As a user begins to type, you can make a <select> element visible underneath with only the options pertaining to what the user has typed. To make an invisible element appear, just toggle the style.visibility property from hidden to visible, and remember to set the size attribute for the <select> tag to force it to the appropriate height.
3. Last but not least, use the lookup form approach we discuss in this issue's article "Four JavaScript functions to help users look up valid entries." Simply bring up a window with an appropriate lookup form if a user's entry has failed validation; or include a link or button allowing the user to choose to view such a form.