Cross-Browser.com

xSelect is another experiment in unobtrusive DHTML.

xSelect implements categories and sub-categories as two SELECT controls where the contents of the second control dynamically change depending on the selection in the main control.

xSelect is part of the X Library from Cross-Browser.com and is licensed LGPL.

View the source and documentation for xSelect.

In your HTML create a SELECT element (let's call it s0) which contains OPTGROUP elements. Within each OPTGROUP can be any number of OPTION elements. Given the id of s0, xSelect creates two SELECT elements:

• The 'main category' SELECT (s1) which contains an OPTION for each OPTGROUP in s0.
• The 'sub-category' SELECT (s2) which is dynamically filled with OPTGROUP OPTIONs depending on which category is selected in s1.

s1 and s2 are dynamically created and appended to the same form which contains s0. s0 is hidden, s1 is positioned where s0 was, and s2 is positioned under or to the right of s1.

If the browser doesn't support the objects required by xSelect, or if the user has Javascript disabled, then xSelect will downgrade (do nothing) and the user will get the original SELECT which contains all main categories (as OPTGROUPs) and all sub-categories (as OPTIONs within each OPTGROUP).

Dynamic

If javascript is enabled and the browser supports the required objects, the user will get the following.

Downgrade

The following SELECT is what the above would look like in 'downgrade' mode.

Dynamic

Here's another example, to show that multiple xSelect objects can be instantiated on the same page.

Downgrade

The following SELECT is what the above would look like in 'downgrade' mode.