Hide/Show form depending on selectOneMenu value change

Question

I have a page with a <h:selectOneMenu> and I want to show some fields or others depending on the chosen value of the selectOneMenu. Is this possible and if so, how?

Answer 1

Yes, this is surely possible. Just bind the dropdown's value to the rendered attribute of the components to be shown/hidden. Here's a kickoff example.

<h:form>
    <h:selectOneMenu value="#{bean.item}">
        <f:selectItem itemLabel="Select..." />
        <f:selectItem itemValue="one" />
        <f:selectItem itemValue="two" />
        <f:selectItem itemValue="three" />
        <f:ajax render="@form" />
    </h:selectOneMenu>

    <h:panelGroup rendered="#{bean.item == 'one'}">
        <p>This will be shown if the selected item equals to "one".</p>
    </h:panelGroup>

    <h:panelGroup rendered="#{bean.item == 'two'}">
        <p>This will be shown if the selected item equals to "two".</p>
    </h:panelGroup>

    <h:panelGroup rendered="#{bean.item == 'three'}">
        <p>This will be shown if the selected item equals to "three".</p>
    </h:panelGroup>
</h:form>

The <h:panelGroup> is just examplary. It can be every JSF HTML component, such as <h:inputText> or even another <h:selectOneMenu>.

See also:

• Conditionally displaying JSF components