comboBox - Combo Box

Displays a list of items one of which can be selected.

Category

Core Controls

Syntax

<xp:comboBox attributes>content</xp:comboBox>
Table 1. Embedded controls
Control Description
selectItem Provides one item for user selection.
selectItems Provides one or more items for user selection.
Table 2. Essential properties
Property Description
id Defaults to comboBox1, comboBox2, and so on.
text Provides a label.
value Binds the control to a data element or other value.
Table 3. All properties
Category Properties
accessibility accesskey, role, tabindex, title
basics attrs, binding, dir, disabled, id, immediate, lang, loaded, readonly, rendered, rendererType, required
data converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, showReadonlyAsDisabled, validator, validators, value, valueChangeListener, valueChangeListeners
dojo dojoAttributes, dojoType
events onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup
styling disabledClass, disableTheme, enabledClass, style, styleClass, themeId

Usage

At run time, a dropdown list appears on the page. The user can select one item.

Examples

This Combo Box control presents two items for selection.
<xp:comboBox id="comboBox1" value="#{document1.fruit}">
	<xp:selectItem itemLabel="Apples" itemValue="apples"></xp:selectItem>
	<xp:selectItem itemLabel="Oranges" itemValue="oranges"></xp:selectItem>
</xp:comboBox>
This Combo Box control presents two items for selection using a formula.
<xp:comboBox id="comboBox1" value="#{document1.fruit}">
	<xp:selectItems>
		<xp:this.value>
			<![CDATA[#{javascript:return new Array("Apples|apples", "Oranges|oranges")}]]>
		</xp:this.value>
	</xp:selectItems>
</xp:comboBox>
This Combo Box gets its item selections from the values in a view column.
<xp:comboBox id="comboBox1" value="#{document1.fruit}">
	<xp:selectItems>
		<xp:this.value>
			<![CDATA[#{javascript:var list = @DbColumn("", "fruits", 1);
			return @Explode(list,",")}]]>
		</xp:this.value>
	</xp:selectItems>
</xp:comboBox>