- 

Available since OmniFaces 3.0

The o:selectItemGroups is an extension of UISelectItems which allows you to iterate over a nested collection representing groups of select items. This is basically the UIComponent counterpart of jakarta.faces.model.SelectItemGroup. There is no equivalent (yet) in the standard Faces API. Currently the only way to represent SelectItemGroup in UI is to manually create and populate them in a backing bean which can end up to be quite verbose.

Usage

Below example assumes a List<Category> as value wherein Category in turn has a List<Product>.

<h:selectOneMenu value="#{bean.selectedProduct}" converter="omnifaces.SelectItemsConverter">
    <f:selectItem itemValue="#{null}" />
    <o:selectItemGroups value="#{bean.categories}" var="category" itemLabel="#{category.name}">
        <f:selectItems value="#{category.products}" var="product" itemLabel="#{product.name}" />
    </o:selectItemGroups>
</h:selectOneMenu>
Demo

Manually creating new SelectItemGroup()

Selected product:

Using <o:selectItemGroups>

Selected product:

Demo source code
<h:form>
    <h2>Manually creating new SelectItemGroup()</h2>
    <h:selectOneMenu value="#{selectItemGroupsBean.selectedProduct}" converter="omnifaces.SelectItemsConverter">
        <f:selectItem itemValue="#{null}" itemLabel="Select ..." />
        <f:selectItems value="#{selectItemGroupsBean.categorySelectItems}" />
        <f:ajax render="selectedProduct" />
    </h:selectOneMenu>
    <p>Selected product: <strong><h:outputText id="selectedProduct" value="#{selectItemGroupsBean.selectedProduct.name}" /></strong></p>
</h:form>

<h:form>
    <h2>Using &lt;o:selectItemGroups&gt;</h2>
    <h:selectOneMenu value="#{selectItemGroupsBean.selectedProduct}" converter="omnifaces.SelectItemsConverter">
        <f:selectItem itemValue="#{null}" itemLabel="Select ..." />
        <o:selectItemGroups value="#{selectItemGroupsBean.categories}" var="category" itemLabel="#{category.name}">
            <f:selectItems value="#{category.products}" var="product" itemLabel="#{product.name}" />
        </o:selectItemGroups>
        <f:ajax render="selectedProduct" />
    </h:selectOneMenu>
    <p>Selected product: <strong><h:outputText id="selectedProduct" value="#{selectItemGroupsBean.selectedProduct.name}" /></strong></p>
</h:form>