SelectOneListbox

SelectOneListbox extends standard SelectOneListbox with advanced styling and custom content support.

Basic
  • Option 1
  • Option 2
  • Option 3
Advanced
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:

Source

<h:form id="form">

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

        <h:outputText value="Basic" />
        <p:selectOneListbox id="basic" value="#{buttonBean.number}">
            <f:selectItem itemLabel="Option 1" itemValue="1" />
            <f:selectItem itemLabel="Option 2" itemValue="2" />
            <f:selectItem itemLabel="Option 3" itemValue="3" />
        </p:selectOneListbox>

        <h:outputText value="Advanced" />
        <p:selectOneListbox id="scroll" value="#{autoCompleteBean.selectedPlayer1}" converter="player" var="p" style="height:200px">
            <f:selectItems value="#{autoCompleteBean.players}" var="player" itemLabel="#{player.name}" itemValue="#{player}" />

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

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

    </h:panelGrid>

    <p:separator />

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

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

            <h:outputText value="Value 2:" /><h:outputText id="selectedPlayer" value="#{autoCompleteBean.selectedPlayer1}" />
        </h:panelGrid>
    </p:dialog>

</h:form>