JavascriptToolbox.com Now Available!

Almost all of my javascript code has been moved over to its new home at The Javascript Toolbox. Please go there to find the latest scripts, information, etc. These pages will remain here for a while for historical purposes in case anyone needs a production copy of old code.
Dynamic Option List
[Javascript Toolbox]  [Example]  [Source]
(Click here for Archived version 1.0 of script)
Description:
This library allows you to easily create select boxes whose contents depend on the value in a parent select box.
It features:
  • Default options to select in child list for each value in the parent list
  • Selecting options by value or text
  • Selected values to set on page load
  • Single-select or multiple-select lists
  • Multiple form fields referencing the same dependent list structure
  • Form resetting
  • Extremely simple integration
  • Backwards-compatible way back to Netscape 4!
In the examples below, there are a few things to note:
  1. Only a single call to initDynamicOptionLists() is made in the BODY onLoad tag. This initializes all lists on the page.
  2. The select objects do not have onChange attributes in them to trigger the population of their child boxes - that is all done in the code automatically!
Example 1: Simple Structure, Multiple Fields
  • Simple 2-level dynamic option list.
  • The default option for Midwest is "Iowa", so any time you pick Midwest in the first list, Iowa will be selected by default.
  • The state's value in the third group is set to "Maine" (perhaps what the user selected in a previous screen, for example). This value is only selected when the page loads. The default option for the "East" region is "New York" and this is what will be selected by default if the user selects a different region, then selects East again.
  • All 3 groups of form fields reference the same DynamicOptionList object, so the region->state mapping exists in the javascript only once. This reduces bandwidth and allows reuse of dependent list mapping code.
Region 1: State 1:
Region 2: State 2:
Region 3: State 3:


Example 2: Lots Of Dependent Fields
This is a 6-level list of junk data, to show that the number of nested levels is unlimited. The second options in each list have sub-options.

Example 3: Multiple Selects, Form Reset
Now we get a little more complicated...
  • Two groups of select boxes - the first group is MULTIPLE select objects, and the second group is normal select boxes, but they both reference the same DynamicOptionList object for their data.
  • This example also exists in its own form, separate from the other examples. The script automatically finds the form where the fields exist - no need for you as the developer to do anything differently.
  • A RESET button exists. It calls form.reset() of the form itself, then calls resetDynamicOptionLists(this.form) which automatically resets the state of the DynamicObjectList objects in this form only. It leaves all other objects on the page alone!
  • Shows that you can set dependent options for a parent select's TEXT of the option rather than the VALUE, if you wish (see the addOptions call for Honda)
  • Adds options that have different values and text
MakeModelType
Make2Model2Type2