AJAX - Select Components

This example demonstrates usage of p:ajax with PrimeFaces selectOneMenu.

Double Combo
City:
  • Select City
  • Ankara
  • Istanbul
  • Izmir
Suburb:
  • Select Suburb

Source

<h:form id="form">

    <p:growl id="msgs" showDetail="true"/>
				
	<p:panel header="Double Combo" style="margin-bottom:10px;">
        <h:panelGrid columns="2" cellpadding="5">
            <p:selectOneMenu id="city" value="#{pprBean.city}">
                <f:selectItem itemLabel="Select City" itemValue="" />
                <f:selectItems value="#{pprBean.cities}" />
                <p:ajax update="suburbs"
                        listener="#{pprBean.handleCityChange}" />
            </p:selectOneMenu>

            <p:selectOneMenu id="suburbs" value="#{pprBean.suburb}">
                <f:selectItem itemLabel="Select Suburb" itemValue="" />
                <f:selectItems value="#{pprBean.suburbs}" />
            </p:selectOneMenu>
        </h:panelGrid>

        <p:separator />
		
		<p:commandButton value="Submit" update="msgs" actionListener="#{pprBean.displayLocation}" id="btnSubmit"/>

	</p:panel>

</h:form>