Hide and show components depending on h:selectOneMenu value - ajax

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 menu. Is this possible and if so, how?
<h:selectOneMenu id="productname" value="#{product.productname}" required="true">
<f:selectItem itemLabel="select" itemValue="null" />
<f:selectItem itemLabel="Detetgent" itemValue="Detergent"/>
<f:selectItem itemLabel="Dishwash" itemValue="Dishwash" />
<f:selectItem itemLabel="Powder" itemValue="Powder" />
<f:selectItem itemLabel="Liquid" itemValue="Liquid" />
</h:selectOneMenu>
<h:panelGroup rendered="Detergernt">
<p>This will be shown if the selected item Detergent.</p>
</h:panelGroup>
<h:panelGroup >
<p>This will be shown if the selected item Dishwash.</p>
</h:panelGroup>
<h:panelGroup >
<p>This will be shown if the selected item equal to powder.</p>
</h:panelGroup>
<h:panelGroup >
<p>This will be shown if the selected item equals to Liquid.</p>
</h:panelGroup>

Answer 1

You just need to check in the rendered attribute if #{product.productname} returns the desired value. In order to update all those components, you should add an <f:ajax> to the menu which updates a common parent component —which is always rendered— of all conditionally rendered components.
<h:selectOneMenu id="productname" value="#{product.productname}" required="true">
<f:selectItem itemLabel="select" itemValue="null" />
<f:selectItem itemLabel="Detetgent" itemValue="Detergent"/>
<f:selectItem itemLabel="Dishwash" itemValue="Dishwash" />
<f:selectItem itemLabel="Powder" itemValue="Powder" />
<f:selectItem itemLabel="Liquid" itemValue="Liquid" />
<f:ajax render="groups" />
</h:selectOneMenu>
<h:panelGroup id="groups">
<h:panelGroup rendered="#{product.productname == 'Detergent'}">
<p>This will be shown if the selected item Detergent.</p>
</h:panelGroup>
<h:panelGroup rendered="#{product.productname == 'Dishwash'}">
<p>This will be shown if the selected item Dishwash.</p>
</h:panelGroup>
<h:panelGroup rendered="#{product.productname == 'Powder'}">
<p>This will be shown if the selected item equal to Powder.</p>
</h:panelGroup>
<h:panelGroup rendered="#{product.productname == 'Liquid'}">
<p>This will be shown if the selected item equals to Liquid.</p>
</h:panelGroup>
</h:panelGroup>
See also:
Conditionally displaying JSF components
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?

Answer 2

<h:selectOneMenu id="productname" value="#{product.productname}" required="true">
<f:selectItem itemLabel="select" itemValue="null" />
<f:selectItem itemLabel="Detetgent" itemValue="Detergent"/>
<f:selectItem itemLabel="Dishwash" itemValue="Dishwash" />
<f:selectItem itemLabel="Powder" itemValue="Powder" />
<f:selectItem itemLabel="Liquid" itemValue="Liquid" />
<p:ajax event="onselect" update="selectedOp" listener="#{product.updateSelectedValue}" />
</h:selectOneMenu>
<h:panelGroup rendered="{product.updateSelectedValue ne null}" id="selectedOp">
<p>This will be show selected value</p>
#{product.updateSelectedValue}
</h:panelGroup>
This is how you can display the selected value from drop down on the page. I assume that you are using PrimeFaces, so using an ajax event tag <p:ajax> inside <h:selectOneMenu >. Also adding the condition on <h:panelGroup rendered="{product.updateSelectedValue ne null}">, so that it will be displayed when selected value is other than null.

Answer 3

Yea, you can achieve this . Please do paste your page , so that it is easy for me to explain on the page itself.
The idea is to use an <a4j:outputPanel> as a container and <h:panelGrourp layout="block" rendered="#{}"> as a wrappper for the fields which are need to hidden.
The selected value of selectOneMenu will be used in the rendered attribute of <h:panelGroup>.