SelectOneMenu

SelectOneMenu extends standard SelectOneMenu with skinning capabilities, editing, effects, filtering and custom content display.

Basic Usage:
  • Select One
  • Option 1
  • Option 2
  • Option 3
Grouping:
  • Select One
  • German Cars
  • BMW
  • Mercedes
  • Volkswagen
  • American Cars
  • Chrysler
  • GM
  • Ford
Editable:
  • Select One
  • Ankara
  • Istanbul
  • Izmir
Pojo:
  • Select One
  • Messi
  • Bojan
  • Iniesta
  • Villa
  • Xavi
  • Puyol
  • Afellay
  • Abidal
  • Alves
  • Pique
  • Keita
  • Adriano
  • Valdes
Content with Filter:
Select One
Messi - 10
Bojan - 9
Iniesta - 8
Villa - 7
Xavi - 6
Puyol - 5
Afellay - 20
Abidal - 22
Alves - 2
Pique - 3
Keita - 15
Adriano - 21
Valdes - 1
Selected Values
Value 1:
Value 2:
Value 3:

Source

<h:form>

    <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">

        <h:outputText value="Basic Usage: " />
        <p:selectOneMenu value="#{buttonBean.number}">
            <f:selectItem itemLabel="Select One" itemValue="" />
            <f:selectItem itemLabel="Option 1" itemValue="1" />
            <f:selectItem itemLabel="Option 2" itemValue="2" />
            <f:selectItem itemLabel="Option 3" itemValue="3" />
        </p:selectOneMenu>

        <h:outputText value="Grouping: " />
        <p:selectOneMenu value="#{formBean.car}">
            <f:selectItem itemLabel="Select One" itemValue="" />
            <f:selectItems value="#{formBean.cars}" />
        </p:selectOneMenu>

        <h:outputText value="Editable: " />
        <p:selectOneMenu value="#{pprBean.city}" effect="fold" editable="true">
            <f:selectItem itemLabel="Select One" itemValue="" />
            <f:selectItems value="#{pprBean.cities}" />
        </p:selectOneMenu>

        <h:outputText value="Pojo: " />
        <p:selectOneMenu value="#{autoCompleteBean.selectedPlayer1}" effect="fade" converter="player">
            <f:selectItem itemLabel="Select One" itemValue="" />
            <f:selectItems value="#{autoCompleteBean.players}" var="player" itemLabel="#{player.name}" itemValue="#{player}"/>
        </p:selectOneMenu>

        <h:outputText value="Content with Filter:" />
        <p:selectOneMenu value="#{autoCompleteBean.selectedPlayer2}" converter="player" panelStyle="width:150px"
                         effect="fade" var="p" style="width:160px"  filter="true" filterMatchMode="startsWith">
            <f:selectItem itemLabel="Select One" itemValue="" />
            <f:selectItems value="#{autoCompleteBean.players}" var="player" itemLabel="#{player.name}" itemValue="#{player}"/>

            <p:column>
                <p:graphicImage value="/images/barca/#{p.photo}" width="40" height="50"/>
            </p:column>

            <p:column>
                #{p.name} - #{p.number}
            </p:column>
        </p:selectOneMenu>

    </h:panelGrid>

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

    <p:dialog header="Selected Values" modal="true" showEffect="fade" hideEffect="fade" widgetVar="dlg">
        <h:panelGrid columns="1" id="display">
            <h:outputText value="Value 1: #{buttonBean.number}" />

            <h:outputText value="Value 2: #{formBean.car}" />

            <h:outputText value="Value 3: #{pprBean.city}" />

            <h:outputText value="Value 4: #{autoCompleteBean.selectedPlayer1.name}" rendered="#{not empty autoCompleteBean.selectedPlayer1}" />

            <h:outputText value="Value 5: #{autoCompleteBean.selectedPlayer2.name}" rendered="#{not empty autoCompleteBean.selectedPlayer2}" />
        </h:panelGrid>
    </p:dialog>

</h:form>