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.

Screen Image

Cascading Selects (Image: The original uploader was Dmccreary at English Wikibooks ., CC BY-SA 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

xmlns="http://www.w3.org/1999/xhtml"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">;

Test conditional selection lists

id="selected-values" xmlns="">

Winter
January

id="seasons" xmlns="">

name="Spring"/>
name="Summer"/>
name="Autumn"/>
name="Winter"/>

id="months" xmlns="">

name="January" season="Winter"/>
name="February" season="Winter"/>
name="March" season="Spring"/>
name="April" season="Spring"/>
name="May" season="Spring"/>
name="June" season="Summer"/>
name="July" season="Summer"/>
name="August" season="Summer"/>
name="September" season="Autumn"/>
name="October" season="Autumn"/>
name="November" season="Autumn"/>
name="December" season="Winter"/>

id="selected-season" nodeset="instance('selected-values')/selected-season"/>

Test conditional selection lists -
month selector depends on the current season

ref="instance('selected-values')/selected-season">
Season:
nodeset="instance('seasons')/item">
ref="@name"/>
ref="@name"/>

ev:event="xforms-value-changed">
ref="instance('selected-values')/selected-month" value="''"/>

ref="instance('selected-values')/selected-month">
Month:
nodeset="instance('months')/item[@season=instance('selected-values')/selected-season]">
ref="@name"/>
ref="@name"/>

ref="instance('selected-values')/selected-season">
selected-season:

ref="instance('selected-values')/selected-month">
selected-month:

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

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.

.....

ev:event="xforms-value-changed">
ref="instance('selected-values')/selected-month" value="''"/>

This suggestion was made by Aaron Reed.

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.