ajax - 根据 h :selectOneMenu value 隐藏和显示组件

Question

我有一个页面 <h:selectOneMenu>我想根据菜单的选择值显示一些字段或其他字段。这可能吗？如果可能的话，如何实现？

<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

您只需 checkin rendered属性 if #{product.productname}返回所需的值。为了更新所有这些组件，您应该添加 <f:ajax>到更新所有条件渲染组件的公共(public)父组件(总是渲染)的菜单。

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

另请参阅:

• 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?