Using JavaScript to Implment a Multi-column SELECT List in HTML

J. Hinsdale

It's hard to render a multi-column <SELECT> / <OPTION> list in HTML, as elements like <TABLE> are not permitted in the <OPTION> tags. One approach is to format the <OPTION> values in a fixed-width font, padded by spaces to line up right, like this:
Item Customer Due Date ---- ------------- ----------- 5 Acme Hardware 10/9/1997 10 Joe's Garage 9/8/1997 85 Another Cust 1/1/1998 201 Even More 10/10/2000

The problem: inside the <OPTION> tags, HTML collapses multiple spaces into to one, yielding an ugly list that looks like this:

Solution using fixed-width font and JavaScript-populated <OPTION>s

The solution is twofold: (1) use a fixed width font in the select list by surrounding the <SELECT> element with a <TT> block, and (2) use JavaScript to populate the <OPTION> menu, thus bypassing the HTML parsing that collapses the multiple spaces. You then make sure the JavaScript function is called using the "onLoad" attribute of your page's <BODY> element.

Notes: this only works in Netscape, or other browser that allows you to set the font in a <SELECT> list. It does not work under Microsoft's Internet Explorer. For that browser, you will probably have to use an OLE (ActiveX) control, or other Microsoft-specific solution. If you have another idea or a better way, mail me at hin@alma.com.

Do a "view source" on this page to see the JavaScript code that handles this select list:

For a database application, the <OPTION> values can be generated as a JavaScript array, which is then used by a generic function to populate the list.

Acknowledgement

Many thanks to Jo Butler, Philp Gwyn, and Carl Jagt of the World Wide Web Artists' Consortium mailing list for their suggestions and assistance.
© 1997 by Alma Mater Software, Inc.