Logo
Navigation
Home Libraries iGoogle Gadgets Javascript Best Practices Support Resources / Links Donate! About Me AJAX Toolbox
jQuery
jQuery Tips Context Menu Plugin jQuery Cheat Sheet
Libraries
Calendar Popup Checkbox Group Data Dumper Data Validation Date Functions DHTML Tree Draggable Iframes Dependent Select Boxes Form Functions Object Position Option Transfer Popups (In-Page DIV) Selectbox Functions Table Sorting And Utils Util/DOM/CSS/Event
doctype [?]
[strict] [loose] [none]

Dynamic Option Lists / Dependent Selects
Overview

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!

Sample

Pick a name: 

<script type="text/javascript">
var names = new DynamicOptionList();
names.addDependentFields("sex","names");
names.forValue("boy").addOptions("Matt","Bob","Joe","Bill","John");
names.forValue("girl").addOptions("Jane","Angie","Jennifer","Amy","Sue");
names.forValue("boy").setDefaultOptions("Joe");
</script>
See the Examples page for more examples.
Logo All Contents Copyright © Matt Kruse