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
Examples

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:

<view/hide code> 
<script type="text/javascript">
var regionState = new DynamicOptionList();
regionState.addDependentFields("REGION1","STATE1");
regionState.addDependentFields("REGION2","STATE2");
regionState.addDependentFields("REGION3","STATE3");

regionState.forValue("west").addOptions("California","Washington","Oregon");
regionState.forValue("midwest").addOptions("Illinois","Iowa","Missouri");
regionState.forValue("east").addOptions("New York","Maine","Pennsylvania");

regionState.forValue("midwest").setDefaultOptions("Iowa");
regionState.forValue("east").setDefaultOptions("New York");
regionState.forField("STATE3").setValues("Maine");
regionState.selectFirstOption = false;
</script>

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.



<view/hide code> 
<script type="text/javascript">
var sixLevel = new DynamicOptionList("L1","L2","L3","L4","L5","L6");
sixLevel.forValue("2").addOptionsTextValue("1","1","2 -->","2");
sixLevel.forValue("2").forValue("2").addOptionsTextValue("1","1","2 -->","2");
sixLevel.forValue("2").forValue("2").forValue("2").addOptionsTextValue("1","1","2 -->","2");
sixLevel.forValue("2").forValue("2").forValue("2").forValue("2").addOptionsTextValue("1","1","2 -->","2");
sixLevel.forValue("2").forValue("2").forValue("2").forValue("2").forValue("2").addOptionsTextValue("1","1","2","2");
</script>

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

<view/hide code> 
<script type="text/javascript">
var makeModel = new DynamicOptionList("MAKE","MODEL","TYPE");
makeModel.addDependentFields("MAKE2","MODEL2","TYPE2");

makeModel.forValue("Ford").addOptions("Fiesta","Focus","Taurus"); // Add options if VALUE of option is selected
makeModel.forText("Honda").addOptions("Civic","Accord","Prelude"); // Add these options if TEXT of option is selected

makeModel.forValue("Ford").setDefaultOptions("Fiesta");
makeModel.forText("Honda").setDefaultOptions("Accord");
makeModel.forValue("Ford").forValue("Taurus").addOptions("2-door","4-door");

makeModel.forField("MODEL").setValues("Focus","Taurus");
makeModel.forField("TYPE").setValues("2-door");
makeModel.forField("MODEL2").setValues("Civic","Prelude");

makeModel.forValue("Toyota").addOptionsTextValue("Camry","10-CAMRY","Corolla","20-COROLLA","Celica","30-CELICA"); // Add options with values different from text
</script>
Logo All Contents Copyright © Matt Kruse