SelectManyMenu

SelectManyMenu is used to choose multiple items from a list.

  • Option 1
  • Option 2
  • Option 3
nova-lightNova-Light
nova-darkNova-Dark
nova-coloredNova-Colored
luna-blueLuna-Blue
luna-amberLuna-Amber
luna-greenLuna-Green
luna-pinkLuna-Pink
omegaOmega

Selected Values
Basic:
No records found.
Advanced:
No records found.
<style type="text/css">
    .ui-datalist .ui-datalist-content {
        border:0 none
    }
    
    .ui-datalist ul {
        padding:0px 10px 0 20px;
        margin: 5px 0;
    }
    
    .label, .value {
        vertical-align: top
    }

    .output {
        font-weight: bold
    }
    
    .ui-selectmanymenu {
        width: 175px;
    }
</style>


<h:form>
    <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5" columnClasses="label, value">
        <p:outputLabel for="basic" value="Basic:" />
        <p:selectManyMenu id="basic" value="#{selectManyView.selectedOptions}">
            <f:selectItem itemLabel="Option 1" itemValue="1" />
            <f:selectItem itemLabel="Option 2" itemValue="2" />
            <f:selectItem itemLabel="Option 3" itemValue="3" />
        </p:selectManyMenu>

        <p:outputLabel for="advanced" value="Advanced:" />
        <p:selectManyMenu id="advanced" value="#{selectManyView.selectedThemes}" converter="themeConverter" 
                          var="t" filter="true" filterMatchMode="contains" showCheckbox="true">
            <f:selectItems value="#{selectManyView.themes}" var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" />

            <p:column>
                <h:graphicImage name="showcase/images/themeswitcher/themeswitcher-#{t.name}.png" alt="#{t.name}" styleClass="ui-theme" />
            </p:column>
            
            <p:column>
                <h:outputText value="#{t.displayName}" />
            </p:column>
        </p:selectManyMenu>
    </h:panelGrid>

    <p:separator />

    <p:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" icon="pi pi-check" />

    <p:dialog header="Selected Values" modal="true" showEffect="fade" widgetVar="dlg" resizable="false">
        <p:panelGrid columns="2" id="display" columnClasses="label,output">
            <h:outputText value="Basic:" />
            <p:dataList value="#{selectManyView.selectedOptions}" var="option">
                <h:outputText value="#{option}" />
            </p:dataList>

            <h:outputText value="Advanced:" />
            <p:dataList value="#{selectManyView.selectedThemes}" var="t">
                <h:outputText value="#{t}" />
            </p:dataList>
        </p:panelGrid>
    </p:dialog>
</h:form>