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提出。