ui:option

Purpose

A single option from a list of options.

Styles

The following styles apply to ui:option by default.

ui|box {
  display: block;
}

Contains

Attributes

Attribute Description Type Default Options Use
label The label of the option. xs:string     required 
selected Specifies whether the option is preselected or not. xs:boolean false true, false  optional 
value The value of the option. xs:string     required 

Example

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:cst="http://www.volantis.com/xmlns/2009/07/cf2/template"
  xmlns:cf2="http://www.volantis.com/xmlns/2009/07/cf2"
  xmlns:ui="http://www.volantis.com/xmlns/2009/07/cf2/ui">
  <head>
    <title>ui:option</title>
  </head>
  <body>
    <div>
      <div>
        <nl>
          <label/>
          <li>
            <ui:label for="s1">Select 1 label:</ui:label>
            <ui:select id="s1">
              <ui:optgroup label="colors">
                <ui:option value="red" label="Red"/>
                <ui:option value="green" label="Green"/>
                <ui:option value="blue" label="Blue"/>
              </ui:optgroup>
              <ui:optgroup label="bikes">
                <ui:option value="cyclo-cross" label="Cyclo-cross"/>
                <ui:option value="fixie" label="Fixie"/>
                <ui:option value="full" label="Full"/>
              </ui:optgroup>
            </ui:select>
          </li>
        </nl>
      </div>
      <div>
        <table>
          <tr>
            <td style="font-weight: bold;">Select 1 properties</td>
          </tr>
          <tr>
            <td>value</td>
            <td><cst:value property-value="s1#value" path="."/></td>
            <td>
              <ui:textfield id="s1value"/>
            </td>
            <td>
              <ui:button>
                <span>Update</span>
                <cf2:on event="cf2:activate">
                  <cf2:param component="s1" name="control"/>
                  <cf2:param component="s1value" name="updater"/>
                  <cf2:param string="value" name="op"/>
                  control.opGet(op).set(updater.opGet('value').get()); </cf2:on>
              </ui:button>
            </td>
          </tr>
          <tr>
            <td>enabled</td>
            <td><cst:value property-value="s1#enabled" path="."/></td>
            <td>
              <ui:button>
                <span>Switch</span>
                <cf2:on event="cf2:activate">
                  <cf2:param component="s1" name="control"/>
                  control.opGet('enabled').set(!control.opGet('enabled').get()); </cf2:on>
              </ui:button>
            </td>
          </tr>
        </table>
      </div>
      <mcs:br/>
      <mcs:br/>
      <mcs:br/>
      <div>
        <nl>
          <label/>
          <li>
            <ui:label for="s2">Select 2 label:</ui:label>
            <ui:select id="s2" multiple="true">
              <ui:optgroup label="colors">
                <ui:option value="red" label="Red"/>
                <ui:option value="green" label="Green"/>
                <ui:option value="blue" label="Blue"/>
              </ui:optgroup>
              <ui:optgroup label="bikes">
                <ui:option value="cyclo-cross" label="Cyclo-cross"/>
                <ui:option value="fixie" label="Fixie"/>
                <ui:option value="full" label="Full"/>
              </ui:optgroup>
            </ui:select>
          </li>
        </nl>
      </div>
      <div>
        <table>
          <tr>
            <td style="font-weight: bold;">Select 2 properties</td>
          </tr>
          <tr>
            <td>values</td>
            <td>
              <cst:value property-value="s2#values" path="[0]"/>&#160; <cst:value
                property-value="s2#values" path="[1]"/>&#160; <cst:value property-value="s2#values"
                path="[2]"/>&#160; <cst:value property-value="s2#values" path="[3]"/>&#160;
                <cst:value property-value="s2#values" path="[4]"/>&#160; <cst:value
                property-value="s2#values" path="[5]"/>
            </td>
          </tr>
          <tr>
            <td>enabled</td>
            <td><cst:value property-value="s2#enabled" path="."/></td>
            <td>
              <ui:button>
                <span>Switch</span>
                <cf2:on event="cf2:activate">
                  <cf2:param component="s2" name="control"/>
                  control.opGet('enabled').set(!control.opGet('enabled').get()); </cf2:on>
              </ui:button>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>

Related topics