Over the past months of contributing to the comp.lang.javascrpt newsgroup I have seen numerous requests (about two a month) from people interested in using JavaScript to make the options presented in HTML SELECT Elements dependent on the selection in a previous SELECT Element, and often to chain (or cascade) these dependent SELECT Elements together to an arbitrary depth.

Various JavaScript's have been presented or referenced as proposed solutions to this problem, but to date I have not seen many that do not define the data for the Option objects in JavaScript Arrays or Objects. This means that the resulting forms cannot be used in browsers that are either JavaScript incapable or have JavaScript disabled.

It is an axiom of competent JavaScript authoring for the Internet that page content and UI interaction should never be dependent on browser support for JavaScript. Because of this, the majority of of the proposed solutions that I have seen are not actually suitable for use on the Internet (although they may be totally acceptable on a company Intranet).

Thinking about the problem, it occurred to me that the data for the Option objects did not need to be defined in JavaScript structures, it could be defined in the HTML as OPTION Elements within the SELECT Elements. If that approach is taken the page ceases to be dependent on JavaScript being available on the client browser.

So the problem became how to define the data in the HTML in a way that would make it both usable without JavaScript and interpretable by the JavaScript so it could be used to control the options presented to the user on browsers that supported JavaScript. I also considered the added problem of having the OPTION Elements in a form that could be easily written by a server-side script.

My solution was to insert 'separator' OPTIONs into the SELECT Elements so that the options list is divided into blocks. Each block corresponds to one significant (non-separator) OPTION in the previous SELECT Element. The separators are defined by the "value" property of the option. The first option in a SELECT Element is taken to be a separator and any other options within the Element that have the same value property are also considered to be separators. Each block of options starts with at least one separator and the list as a whole starts with an additional separator.

The list separator (the first option in the list) is presented as the only option when no selection has been made in the previous SELECT Element. The last of the, one or more, block separating separators is presented as the first option in the list for a block when no other option in that block has previously been selected.

I could probably go on at great length on how this works, and in the future I will extend the detail on this page. For now I hope that the example provided in the source code of this page will serve to describe the set-up of the OPTION lists.

This is an example of the JavaScript controlled Dependent Select List:-

Master SELECT Element  -choose one- option 1 option 2 option 3

First dependent SELECT Element  <--select previous first -select one with previous item 1- option 1 a option 1 b option 1 c -select one with previous item 2- option 2 a option 2 b option 2 c -select one with previous item 3- option 3 a option 3 b option 3 c

Second dependent SELECT Element  <--select previous first -select one with previous item 1 a- option 1 a.1 option 1 a.2 option 1 a.3 -select one with previous item 1 b- option 1 b.1 option 1 b.2 option 1 b.3 -select one with previous item 1 c- option 1 c.1 option 1 c.2 option 1 c.3 -select one with previous item 2 a- option 2 a.1 option 2 a.2 option 2 a.3 -select one with previous item 2 b- option 2 b.1 option 2 b.2 option 2 b.3 -select one with previous item 2 c- option 2 c.1 option 2 c.2 option 2 c.3 -select one with previous item 3 a- option 3 a.1 option 3 a.2 option 3 a.3 -select one with previous item 3 b- option 3 b.1 option 3 b.2 option 3 b.3 -select one with previous item 3 c- option 3 c.1 option 3 c.2 option 3 c.3

Third dependent SELECT Element  <--select previous first -select one with previous item 1 a.1- option 1 a.1_a option 1 a.1_b option 1 a.1_c -select one with previous item 1 a.2- option 1 a.2_a option 1 a.2_b option 1 a.2_c -select one with previous item 1 a.3- option 1 a.3_a option 1 a.3_b option 1 a.3_c option 1 a.3_d option 1 a.3_e -select one with previous item 1 b.1- option 1 b.1_a option 1 b.1_b option 1 b.1_c -select one with previous item 1 b.2- option 1 b.2_a option 1 b.2_b option 1 b.2_c option 1 b.2_d -select one with previous item 1 b.3- option 1 b.3_a option 1 b.3_b option 1 b.3_c -select one with previous item 1 c.1- option 1 c.1_a option 1 c.1_b option 1 c.1_c -select one with previous item 1 c.2- option 1 c.2_a option 1 c.2_b option 1 c.2_c -select one with previous item 1 c.3- option 1 c.3_a option 1 c.3_b option 1 c.3_c -select one with previous item 2 a.1- option 2 a.1_a option 2 a.1_b option 2 a.1_c -select one with previous item 2 a.2- option 2 a.2_a option 2 a.2_b option 2 a.2_c -select one with previous item 2 a.3- option 2 a.3_a option 2 a.3_b option 2 a.3_c -select one with previous item 2 b.1- option 2 b.1_a option 2 b.1_b option 2 b.1_c -select one with previous item 2 b.2- option 2 b.2_a option 2 b.2_b option 2 b.2_c -select one with previous item 2 b.3- option 2 b.3_a option 2 b.3_b option 2 b.3_c -select one with previous item 2 c.1- option 2 c.1_a option 2 c.1_b option 2 c.1_c -select one with previous item 2 c.2- option 2 c.2_a option 2 c.2_b option 2 c.2_c -select one with previous item 2 c.3- option 2 c.3_a option 2 c.3_b option 2 c.3_c -select one with previous item 3 a.1- option 3 a.1_a option 3 a.1_b option 3 a.1_c -select one with previous item 3 a.2- option 3 a.2_a option 3 a.2_b option 3 a.2_c -select one with previous item 3 a.3- option 3 a.3_a option 3 a.3_b option 3 a.3_c -select one with previous item 3 b.1- option 3 b.1_a option 3 b.1_b option 3 b.1_c -select one with previous item 3 b.2- option 3 b.2_a option 3 b.2_b option 3 b.2_c -select one with previous item 3 b.3- option 3 b.3_a option 3 b.3_b option 3 b.3_c -select one with previous item 3 c.1- option 3 c.1_a option 3 c.1_b option 3 c.1_c -select one with previous item 3 c.2- option 3 c.2_a option 3 c.2_b option 3 c.2_c -select one with previous item 3 c.3- option 3 c.3_a option 3 c.3_b option 3 c.3_c

For readers who have JavaScript enabled, this is an example of the same data presented without the JavaScript control, to demonstrate how this type of list can degrade for the JavaScript incapable/disabled:-

Master SELECT Element  -choose one- option 1 option 2 option 3

First dependent SELECT Element  <--select previous first -select one with previous item 1- option 1 a option 1 b option 1 c -select one with previous item 2- option 2 a option 2 b option 2 c -select one with previous item 3- option 3 a option 3 b option 3 c

Second dependent SELECT Element  <--select previous first -select one with previous item 1 a- option 1 a.1 option 1 a.2 option 1 a.3 -select one with previous item 1 b- option 1 b.1 option 1 b.2 option 1 b.3 -select one with previous item 1 c- option 1 c.1 option 1 c.2 option 1 c.3 -select one with previous item 2 a- option 2 a.1 option 2 a.2 option 2 a.3 -select one with previous item 2 b- option 2 b.1 option 2 b.2 option 2 b.3 -select one with previous item 2 c- option 2 c.1 option 2 c.2 option 2 c.3 -select one with previous item 3 a- option 3 a.1 option 3 a.2 option 3 a.3 -select one with previous item 3 b- option 3 b.1 option 3 b.2 option 3 b.3 -select one with previous item 3 c- option 3 c.1 option 3 c.2 option 3 c.3

Third dependent SELECT Element  <--select previous first -select one with previous item 1 a.1- option 1 a.1_a option 1 a.1_b option 1 a.1_c -select one with previous item 1 a.2- option 1 a.2_a option 1 a.2_b option 1 a.2_c -select one with previous item 1 a.3- option 1 a.3_a option 1 a.3_b option 1 a.3_c option 1 a.3_d option 1 a.3_e -select one with previous item 1 b.1- option 1 b.1_a option 1 b.1_b option 1 b.1_c -select one with previous item 1 b.2- option 1 b.2_a option 1 b.2_b option 1 b.2_c option 1 b.2_d -select one with previous item 1 b.3- option 1 b.3_a option 1 b.3_b option 1 b.3_c -select one with previous item 1 c.1- option 1 c.1_a option 1 c.1_b option 1 c.1_c -select one with previous item 1 c.2- option 1 c.2_a option 1 c.2_b option 1 c.2_c -select one with previous item 1 c.3- option 1 c.3_a option 1 c.3_b option 1 c.3_c -select one with previous item 2 a.1- option 2 a.1_a option 2 a.1_b option 2 a.1_c -select one with previous item 2 a.2- option 2 a.2_a option 2 a.2_b option 2 a.2_c -select one with previous item 2 a.3- option 2 a.3_a option 2 a.3_b option 2 a.3_c -select one with previous item 2 b.1- option 2 b.1_a option 2 b.1_b option 2 b.1_c -select one with previous item 2 b.2- option 2 b.2_a option 2 b.2_b option 2 b.2_c -select one with previous item 2 b.3- option 2 b.3_a option 2 b.3_b option 2 b.3_c -select one with previous item 2 c.1- option 2 c.1_a option 2 c.1_b option 2 c.1_c -select one with previous item 2 c.2- option 2 c.2_a option 2 c.2_b option 2 c.2_c -select one with previous item 2 c.3- option 2 c.3_a option 2 c.3_b option 2 c.3_c -select one with previous item 3 a.1- option 3 a.1_a option 3 a.1_b option 3 a.1_c -select one with previous item 3 a.2- option 3 a.2_a option 3 a.2_b option 3 a.2_c -select one with previous item 3 a.3- option 3 a.3_a option 3 a.3_b option 3 a.3_c -select one with previous item 3 b.1- option 3 b.1_a option 3 b.1_b option 3 b.1_c -select one with previous item 3 b.2- option 3 b.2_a option 3 b.2_b option 3 b.2_c -select one with previous item 3 b.3- option 3 b.3_a option 3 b.3_b option 3 b.3_c -select one with previous item 3 c.1- option 3 c.1_a option 3 c.1_b option 3 c.1_c -select one with previous item 3 c.2- option 3 c.2_a option 3 c.2_b option 3 c.2_c -select one with previous item 3 c.3- option 3 c.3_a option 3 c.3_b option 3 c.3_c

OPTION elements may have a selected attribute and that will pre-select an option in the dependent select lists, also selecting the corresponding items in the SELECT Elements that precede that list. I have followed the normal HTML rules, so the first selected attribute found in any list of options is the selected option, and all subsequent options with a selected attribute are ignored. The pre-selected option (if any) in the latest list in the dependent chain will take precedence over any selected options in SELECT Elements that precede that list in the chain.

I have included a validation function for the main object Class. Details are in the page source code. The list is considered valid if a selection has been made at each level in the chain at the moment that the function is called.

Browser testing:

IE 4.0 5.0 & 6.0, Mozilla 1.0.1, Netscape 4.51, 4.79, 6.1 & 7.0, Opera 6.04, 6.05 & 7.11, ICEbrowser 5.4.1 All on Windows 98, and Konqueror 3.1 on Linux. The script is known to fail on Web Browser 2.0 on the Palm OS as it lacks an Option constructor (but that means that it also cannot execute any other scripts of this type either and at least with this script the user does actually get the options presented in the SELECT element).

To Do:

• The code could do with doing more checking. For example, making sure that the number of blocks defined in the next SELECT Element corresponds with the number of non-separator OPTIONs in its predecessor.
• I should change the way that blocks of options default so that a block that is only one option long is pre-selected, rather than showing its separator and only one option to choose from.
• I will have to think about a reset function for a form containing one of these lists. Maybe an onReset function attached to the form object.