XForms/动态下拉列表
< XForms
您希望下拉列表的内容依赖于另一个下拉列表的值。这也被称为“级联选择”。
我们在模型中拥有两个实例。第一个实例填充第一个下拉列表。第二个下拉列表使用一个xf:itemset仅从第二个实例中选择相关项目。实际上，我们正在向第二个列表中选择的项目列表添加一个“where”子句。
所呈现的表单展示了一个例子，用户可以选择季节（春季，夏季，...），在第二个下拉列表中，用户只能从该季节相关的月份中选择。
我们还将自动将月份设置为null，当季节选择发生变化时，以确保我们的配对始终有效。
该示例已在Firefox 2.0.0.12和Mozilla XForms附加组件0.8.4以及FireFox 3.0上进行了测试。
请注意，选择的初始值是在实例值中设置的。
<html 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">
<head>
<title>Test conditional selection lists</title>
<xf:model>
<xf:instance id="selected-values" xmlns="">
<data>
<selected-season>Winter</selected-season>
<selected-month>January</selected-month>
</data>
</xf:instance>
<xf:instance id="seasons" xmlns="">
<root>
<item name="Spring"/>
<item name="Summer"/>
<item name="Autumn"/>
<item name="Winter"/>
</root>
</xf:instance>
<xf:instance id="months" xmlns="">
<root>
<item name="January" season="Winter"/>
<item name="February" season="Winter"/>
<item name="March" season="Spring"/>
<item name="April" season="Spring"/>
<item name="May" season="Spring"/>
<item name="June" season="Summer"/>
<item name="July" season="Summer"/>
<item name="August" season="Summer"/>
<item name="September" season="Autumn"/>
<item name="October" season="Autumn"/>
<item name="November" season="Autumn"/>
<item name="December" season="Winter"/>
</root>
</xf:instance>
<xf:bind id="selected-season" nodeset="instance('selected-values')/selected-season"/>
</xf:model>
</head>
<body>
<p>Test conditional selection lists -
month selector depends on the current season</p>
<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>
<!-- As soon as you chance this value we set the month to be blank -->
<xf:action ev:event="xforms-value-changed">
<xf:setvalue ref="instance('selected-values')/selected-month" value="''"/>
</xf:action>
</xf:select1>
<br/>
<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>
<br/>
<xf:output ref="instance('selected-values')/selected-season">
<xf:label>selected-season: </xf:label>
</xf:output>
<br/>
<xf:output ref="instance('selected-values')/selected-month">
<xf:label>selected-month: </xf:label>
</xf:output>
<h4>Relevant Months using Repeat</h4>
<xf:repeat nodeset="instance('months')/item[@season=instance('selected-values')/selected-season]">
<xf:output ref="@name"/>
</xf:repeat>
</body>
</html>
请注意，我们在第一个下拉列表语句中添加了一个动作并捕获了xforms-value-changed事件。我们使用xf:setvalue事件将第二个下拉列表的值更改为空白。这将确保值对始终保持一致。
<xf:select1>
.....
<!-- As soon as you change this value we set the month to be null -->
<xf:action ev:event="xforms-value-changed">
<xf:setvalue ref="instance('selected-values')/selected-month" value="''"/>
</xf:action>
</xf:select1>
该建议由Aaron Reed提出。