XForms/Select1 Multi-Column
< XForms
Motivation
editYou want to select one item from multiple column of items.
Method
editTo do this we must unselect all of the column not selected so that only one column has a value in the output.
Source Code
edit<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>Select1 Multi Column</title>
<style type="text/css"><![CDATA[
@namespace xf url("http://www.w3.org/2002/xforms");
body {
font-family: Helvetica, sans-serif;
font-size: 10pt;
}
/* vertical align the selectors in each column. I am not sure why none of these CSS selectors work */
.state-selector tr td {
vertical-align:text-top;
align: top;
valign: top;
}
/* this is also not working */
.state-selector xf\:label {
font-weight: bold;
}
]]>
</style>
<xf:model>
<xf:instance xmlns="" id="cols">
<data>
<col-1/>
<col-2/>
<col-3/>
<cols/>
</data>
</xf:instance>
<!-- this concatenates the three column values -->
<xf:bind nodeset="cols" calculate="concat(../col-1, ../col-2, ../col-3)"/>
<!-- this is where we log the events -->
<xf:instance id="log">
<data xmlns="">
<event/>
</data>
</xf:instance>
<xf:action ev:event="xforms-ready">
<xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
<xf:setvalue ref="instance('log')/event[last()]" value="'xforms-ready'"/>
</xf:action>
</xf:model>
</head>
<body>
<p>Select1 Multi Column</p>
<table border="1">
<tr>
<td valign="top">
<xf:select1 ref="col-1" appearance="full">
<xf:item>
<xf:label>Red</xf:label>
<xf:value>red</xf:value>
</xf:item>
<xf:item>
<xf:label>Orange</xf:label>
<xf:value>orange</xf:value>
</xf:item>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="instance('cols')/col-2" value="''"/>
<xf:setvalue ref="instance('cols')/col-3" value="''"/>
<xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
<xf:setvalue ref="instance('log')/event[last()]" value="'col 1 xforms-value-changed'"/>
</xf:action>
</xf:select1>
</td>
<td valign="top">
<xf:select1 ref="col-2" appearance="full">
<xf:item>
<xf:label>Yellow</xf:label>
<xf:value>yellow</xf:value>
</xf:item>
<xf:item>
<xf:label>Green</xf:label>
<xf:value>green</xf:value>
</xf:item>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="instance('cols')/col-1" value="''"/>
<xf:setvalue ref="instance('cols')/col-3" value="''"/>
<xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
<xf:setvalue ref="instance('log')/event[last()]" value="'col 2 xforms-value-changed'"/>
</xf:action>
</xf:select1>
</td>
<td valign="top">
<xf:select1 ref="col-3" appearance="full">
<xf:item>
<xf:label>Blue</xf:label>
<xf:value>blue</xf:value>
</xf:item>
<xf:item>
<xf:label>Indigo</xf:label>
<xf:value>indigo</xf:value>
</xf:item>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="instance('cols')/col-1" value="''"/>
<xf:setvalue ref="instance('cols')/col-2" value="''"/>
<xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
<xf:setvalue ref="instance('log')/event[last()]" value="'col 3 xforms-value-changed'"/>
</xf:action>
</xf:select1>
</td>
</tr>
</table>
<xf:trigger>
<xf:label>Clear</xf:label>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="col-1" value="''"/>
<xf:setvalue ref="col-2" value="''"/>
<xf:setvalue ref="col-3" value="''"/>
<xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
<xf:setvalue ref="instance('log')/event[last()]" value="'clear'"/>
</xf:action>
</xf:trigger>
<br/>
<xf:trigger>
<xf:label>refresh</xf:label>
<xf:action ev:event="refresh">
<xf:setvalue ref="col-1" value="''"/>
<xf:setvalue ref="col-2" value="''"/>
<xf:setvalue ref="col-3" value="''"/>
<xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
<xf:setvalue ref="instance('log')/event[last()]" value="'refresh'"/>
</xf:action>
</xf:trigger>
<br/>
<xf:output ref="cols">
<xf:label>Color selected: </xf:label>
</xf:output>
<br/>
<xf:output ref="col-1">
<xf:label>Column 1: </xf:label>
</xf:output>
<br/>
<xf:output ref="col-2">
<xf:label>Column 2: </xf:label>
</xf:output>
<br/>
<xf:output ref="col-3">
<xf:label>Column 3: </xf:label>
</xf:output>
<br/>
<div id="log">
<span>
<b>Event Log</b>
</span>
<xf:repeat id="results-repeat" nodeset="instance('log')/event">
<xf:output ref="."/>
</xf:repeat>
</div>
</body>
</html>