Select1 Multi-Column

<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>