Hide and show components depending on h:selectOneMenu value

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>

Are you using libraries or only plain JSF 1.2 / 2.0 ? – Alexandre Lavoie Nov 28 '12 at 05:34 — Alexandre Lavoie, Nov 28 '12 at 05:34
am using jsf 2.0 and Primefaces – Elango.Stack Nov 29 '12 at 07:43 — Elango.Stack, Nov 29 '12 at 07:43

score 5 · Answer 1 · edited May 23 '17 at 11:53

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>

<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.

This will fail for the reason as mentioned in the 2nd "see also" link of my answer. Plus, `` is't required at all. The standard JSF library already offers the ``. The listener method has also no use in this particular case. — BalusC, Nov 29 '12 at 11:31

score 0 · Answer 3 · edited Nov 28 '12 at 06:08

0

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>.

edited Nov 28 '12 at 06:08

prageeth

7,159
7
44
72

answered Nov 28 '12 at 05:29

Harsha_2012

379
1
3
13

Hide and show components depending on h:selectOneMenu value

3 Answers3

See also: