SelectOneMenu SelectOneMenu is used to choose a single item from a list.
  • Select One
  • Xbox One
  • PS4
  • Wii U
  • Select One
  • German Cars
  • BMW
  • Mercedes
  • Volkswagen
  • American Cars
  • Chrysler
  • GM
  • Ford
  • Select One
  • New York
  • Barcelona
  • Berlin
  • London
  • Istanbul
  • Paris
Afterdark
Afternoon
Afterwork
Aristo
Black-Tie
Blitzer
Bluesky
Bootstrap
Casablanca
Cupertino
Cruze
Dark-Hive
Delta
Dot-Luv
Eggplant
Excite-Bike
Flick
Glass-X
Home
Hot-Sneaks
Humanity
Le-Frog
Midnight
Mint-Choc
Omega
Overcast
Pepper-Grinder
Redmond
Rocket
Sam
Smoothness
South-Street
Start
Sunny
Swanky-Purse
Trontastic
UI-Darkness
UI-Lightness
Vader
Values
Basic:
Grouping:
Editable
Advanced:
Lazy:
<h:form>
    <p:messages autoUpdate="true" />

    <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
        <p:outputLabel for="console" value="Basic:" />
        <p:selectOneMenu id="console" value="#{selectOneMenuView.console}" style="width:125px">
            <f:selectItem itemLabel="Select One" itemValue="" />
            <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
            <f:selectItem itemLabel="PS4" itemValue="PS4" />
            <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
        </p:selectOneMenu>

        <p:outputLabel for="car" value="Grouping: " />
        <p:selectOneMenu id="car" value="#{selectOneMenuView.car}">
            <f:selectItem itemLabel="Select One" itemValue="" />
            <f:selectItems value="#{selectOneMenuView.cars}" />
        </p:selectOneMenu>

        <p:outputLabel for="city" value="Editable: " />
        <p:selectOneMenu id="city" value="#{selectOneMenuView.city}" effect="fold" editable="true">
            <f:selectItem itemLabel="Select One" itemValue="" />
            <f:selectItems value="#{selectOneMenuView.cities}" />
        </p:selectOneMenu>

        <p:outputLabel for="advanced" value="Advanced:"  />
        <p:selectOneMenu id="advanced" value="#{selectOneMenuView.theme}" converter="themeConverter" panelStyle="width:180px"
                         effect="fade" var="t" style="width:160px" filter="true" filterMatchMode="startsWith">
            <f:selectItems value="#{selectOneMenuView.themes}" var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" />

            <p:column style="width:10%">
                <h:outputText styleClass="ui-theme ui-theme-#{t.name}" />
            </p:column>

            <p:column>
                <h:outputText value="#{t.displayName}" />
            </p:column>
        </p:selectOneMenu>

        <p:outputLabel for="lazy" value="Lazy:" />
        <p:selectOneMenu id="lazy" value="#{selectOneMenuView.option}" lazy="true" style="width:125px">
            <f:selectItem itemLabel="Select One" itemValue="" />
            <f:selectItems value="#{selectOneMenuView.options}" />
        </p:selectOneMenu>
    </h:panelGrid>

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

    <p:dialog header="Values" modal="true" showEffect="bounce" widgetVar="dlg" resizable="false">
        <p:panelGrid columns="2" id="display" columnClasses="label,value">
            <h:outputText value="Basic:" />
            <h:outputText value="#{selectOneMenuView.console}" />

            <h:outputText value="Grouping:" />
            <h:outputText value="#{selectOneMenuView.car}" />

            <h:outputText value="Editable" />
            <h:outputText value="#{selectOneMenuView.city}" />

            <h:outputText value="Advanced:" />
            <h:outputText value="#{selectOneMenuView.theme.displayName}" />

            <h:outputText value="Lazy:" />
            <h:outputText value="#{selectOneMenuView.option}" />
        </p:panelGrid>
    </p:dialog>
</h:form>
                
PrimeTek, Copyright © 2017
All rights reserved.
Running PrimeFaces-6.2-SNAPSHOT on Mojarra-2.3.2.