根据 selectOneMenu 值有条件地渲染组件 [英] Conditionally render a component based on selectOneMenu value
问题描述
有没有办法根据用户从 selectOneMenu 组件中选择的当前值来呈现组件?我的 selectOneMenu 组件填充了一个包含两个值的枚举,吸烟者和非吸烟者.如果用户选择了吸烟者,我想在其下方呈现一个复选框,让用户检查他们每天吸烟 10、20、30+ 等的数量.如果他们选择了非吸烟者,我也希望相反的工作,即复选框不会呈现/消失.
Is there a way to render a component based on the current value the user has selected from a selectOneMenu component? My selectOneMenu component is populated with an enum consisting of two values, smoker and non-smoker. If the user has smoker selected I want to render a checkbox below it which lets the user check how many they smoke a day 10, 20, 30+, etc. I also want the opposite to work if they user has selected non-smoker i.e. the check boxes don't render/disappear.
推荐答案
只需在目标组件的 rendered
属性中检查下拉菜单的值,并通过 < 更新它们的公共父级.f:ajax>
.这是一个启动示例:
Just check the dropdown menu's value in the rendered
attribute of the target components and update their common parent by a <f:ajax>
. Here's a kickoff example:
<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>
如果您想根据选定的值执行一些业务逻辑,请使用
.
If you'd like to perform some business logic based on the selected value, use <f:ajax listener>
.
<f:ajax listener="#{bean.changeItem}" render="results" />
public void changeItem() {
someResult = someService.getByItem(item);
}
另见:
- 为什么我需要嵌套一个带有渲染=#{some}"的组件?在另一个组件中,当我想对其进行 ajax 更新时?
- 如何加载和更改 ah:selectOneMenu 时显示依赖的 h:selectOneMenu
- 有条件地显示 JSF 组件
这篇关于根据 selectOneMenu 值有条件地渲染组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!