根据 selectOneMenu 值有条件地渲染组件

Posted

技术标签:

【中文标题】根据 selectOneMenu 值有条件地渲染组件【英文标题】:Conditionally render a component based on selectOneMenu value 【发布时间】:2017-02-22 08:34:14 【问题描述】:

有没有办法根据用户从 selectOneMenu 组件中选择的当前值来呈现组件?我的 selectOneMenu 组件填充了一个枚举,该枚举由两个值组成,吸烟者和非吸烟者。如果用户选择了吸烟者,我想在其下方呈现一个复选框,让用户检查他们在 10 天、20 天、30 天以上等天抽了多少烟。如果他们的用户选择了非吸烟者,我也希望相反的工作,即复选框不会呈现/消失。

【问题讨论】:

【参考方案1】:

只需检查目标组件rendered 属性中下拉菜单的值,并通过<f:ajax> 更新它们的公共父级。这是一个启动示例:

<h:selectOneMenu value="#bean.item">
    <f:selectItem itemValue="one" />
    <f:selectItem itemValue="two" />
    <f:selectItem itemValue="three" />
    <f:ajax render="results" />
</h:selectOneMenu>

<h:panelGroup id="results">
    <h:panelGroup rendered="#bean.item eq 'one'">
        You have selected "one".
    </h:panelGroup>
    <h:panelGroup rendered="#bean.item eq 'two'">
        You have selected "two".
    </h:panelGroup>
    <h:panelGroup rendered="#bean.item eq 'three'">
        You have selected "three".
    </h:panelGroup>
</h:panelGroup>

如果您想根据所选值执行一些业务逻辑,请使用&lt;f:ajax listener&gt;

<f:ajax listener="#bean.changeItem" render="results" />
public void changeItem() 
    someResult = someService.getByItem(item);

另见:

Why do I need to nest a component with rendered="#some" in another component when I want to ajax-update it? How to load and display dependent h:selectOneMenu on change of a h:selectOneMenu Conditionally displaying JSF components

【讨论】:

以上是关于根据 selectOneMenu 值有条件地渲染组件的主要内容,如果未能解决你的问题,请参考以下文章

根据 selectOneMenu 值有条件地渲染组件

有条件地渲染取决于 p:selectOneMenu 值

根据外部值有条件地应用管道步骤

如何根据另一个参数的值有条件地禁用 Storybook 中的控件?

根据三列的值有条件地和交互地计算列

如何根据传入参数的值有条件地应用 GraphQL 过滤器?