XForms/Dynamic Selection Lists

Motivation
You want that the content of a selection list to depend on the value another selection list. This is also known as "Cascading Selection".

Method
We have two instances in a model. The first instance populates the first select1 list. The second select1 uses an xf:itemset to only select the relevant items from the second instance. In effect we are adding a "where" clause to the list of items selected in the second list.

The presented form shows an example where the user can select a season (Spring, Summer,...) and in a second select the user will only be able to select from the relevant month in that season.

We also will automatically set the month to null when the season selection changes to make sure our pairing is always valid.

The example had been tested with Firefox 2.0.0.12 and the Mozilla XForms add on 0.8.4 as well as on FireFox 3.0.

Link to XForms Application
Load Example XForms Application

Note that the initial values of the selections are set in the instance values.

Sample Program


     

         <item name="September" season="Autumn"/> <item name="October" season="Autumn"/> <item name="November" season="Autumn"/> <item name="December" season="Winter"/> </xf:instance> <xf:bind id="selected-season" nodeset="instance('selected-values')/selected-season"/> </xf:model> Test conditional selection lists - month selector depends on the current season

<xf:select1 ref="instance('selected-values')/selected-season"> <xf:label>Season:</xf:label> <xf:itemset nodeset="instance('seasons')/item"> <xf:label ref="@name"/> <xf:value ref="@name"/> </xf:itemset> <xf:action ev:event="xforms-value-changed"> <xf:setvalue ref="instance('selected-values')/selected-month" value="''"/> </xf:action> </xf:select1> <xf:select1 ref="instance('selected-values')/selected-month"> <xf:label>Month:</xf:label> <xf:itemset nodeset="instance('months')/item[@season=instance('selected-values')/selected-season]"> <xf:label ref="@name"/> <xf:value ref="@name"/> </xf:itemset> </xf:select1> <xf:output ref="instance('selected-values')/selected-season"> <xf:label>selected-season: </xf:label> </xf:output>

<xf:output ref="instance('selected-values')/selected-month"> <xf:label>selected-month: </xf:label> </xf:output>

Relevant Months using Repeat <xf:repeat nodeset="instance('months')/item[@season=instance('selected-values')/selected-season]"> <xf:output ref="@name"/> </xf:repeat>

Updating the Second Select When the First Select Changes
Note that we have added an action and trap the xforms-value-changed event to the first select1 statement. We use the xf:setvalue event to change the value of the second select1 to be blank. This will guarantee that the pair of values will always be consistent.

This suggestion was made by Aaron Reed.