A single option from a list of options.
The following styles apply to ui:option by default.
ui|box {
display: block;
}
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 |
<?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]"/>  <cst:value
property-value="s2#values" path="[1]"/>  <cst:value property-value="s2#values"
path="[2]"/>  <cst:value property-value="s2#values" path="[3]"/> 
<cst:value property-value="s2#values" path="[4]"/>  <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>