How to display a second h:selectOneMenu depending on first h:selectOneMenu?

I am using JSF 2.0 with PrimeFaces. I am using two <h:selectOneMenu> components to represent two dropdowns and I have the following functional requirement:

• If the user chooses the options Availibility Histogramme or Availibility line on the first dropdown, then the second dropdown should show up.

• Else if the user chooses Availibility Percentage on the first dropdown, then the second dropdown should be hidden.

How can I do that?

Here is the relevant snippet of my view so far:

<h:selectOneMenu value="#{bean.availabilityDisplay}" id="Display">
    <f:selectItem itemLabel="-- Select Display-- " itemValue="0"/> 
    <f:selectItems value="#{bean.getMyListDisplays()}"/>
</h:selectOneMenu>

<h:selectOneMenu value="#{bean.frequency}" id="frequency">
    <f:selectItem itemLabel="-- Select Frequency-- "开发者_如何学C itemValue="0"/> 
    <f:selectItems  value="#{bean.getMyListFrequency()}"/>
</h:selectOneMenu>

JSF2 supports ajax, so you can attach something like that to the first selectBox

<f:ajax event="valueChange" render="<id of the second select box>" execute="@this"/>

(as we discussed on the PrimeFaces forum)

Wrap your second item inside an output panel:

<h:selectOneMenu value="#{bean.availabilityDisplay}" id="Display">
    <f:selectItem itemLabel="-- Select Display-- " itemValue="0"/> 
    <f:selectItems value="#{bean.myListDisplays}"/>
    <f:ajax render="ajaxTarget" />
</h:selectOneMenu>

<p:outputPanel id="ajaxTarget">
    <h:selectOneMenu 
            value="#{bean.frequency}" id="frequency" 
            rendered="#{bean.availabilityDisplay == 2 or bean.availabilityDisplay == 4}">
        <f:selectItem itemLabel="-- Select Frequency-- " itemValue="0"/> 
        <f:selectItems  value="#{bean.myListFrequency}"/>
    </h:selectOneMenu>
</p:outputPanel>

http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=ajax&sample=selectsUpdates&skin=blueSky you can use the #{not empty bean.availabilityDisplay} for render property