如何使用 JSF 显示/隐藏组件？ 我目前正在尝试在 javascript 的帮助下做同样的事情，但没有成功。 我不能使用任何第三方库。
谢谢|阿比
【问题讨论】：
<f:ajax> 标签将允许您轻松更新页面的一部分，而不是触发完整的页面刷新。
标签： java javascript jsf
您实际上可以在不使用 JavaScript 的情况下完成此 ，至少在 JSF2 中。例如，下面的 JSF 代码根据第三个的值显示或隐藏两个下拉列表中的一个或两个。 AJAX 事件用于更新显示：
<h:selectOneMenu value="#{workflowProcEditBean.performedBy}">
<f:selectItem itemValue="O" itemLabel="Originator" />
<f:selectItem itemValue="R" itemLabel="Role" />
<f:selectItem itemValue="E" itemLabel="Employee" />
<f:ajax event="change" execute="@this" render="perfbyselection" />
</h:selectOneMenu>
<h:panelGroup id="perfbyselection">
<h:selectOneMenu id="performedbyroleid" value="#{workflowProcEditBean.performedByRoleID}"
rendered="#{workflowProcEditBean.performedBy eq 'R'}">
<f:selectItem itemLabel="- Choose One -" itemValue="" />
<f:selectItems value="#{workflowProcEditBean.roles}" />
</h:selectOneMenu>
<h:selectOneMenu id="performedbyempid" value="#{workflowProcEditBean.performedByEmpID}"
rendered="#{workflowProcEditBean.performedBy eq 'E'}">
<f:selectItem itemLabel="- Choose One -" itemValue="" />
<f:selectItems value="#{workflowProcEditBean.employees}" />
</h:selectOneMenu>
</h:panelGroup>
【讨论】：
onchange="submit()" 添加到外部<h:selectOneMenu> 元素中，如下所示：stackoverflow.com/a/18787995/2577705。 valueChangeListener 不是必需的，除非需要跟踪更改本身。
通常，您需要通过其clientId 获取控件的句柄。此示例使用带有请求范围绑定的 JSF2 Facelets 视图来获取另一个控件的句柄：
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head><title>Show/Hide</title></h:head>
<h:body>
<h:form>
<h:button value="toggle"
onclick="toggle('#{requestScope.foo.clientId}'); return false;" />
<h:inputText binding="#{requestScope.foo}" id="x" style="display: block" />
</h:form>
<script type="text/javascript">
function toggle(id) {
var element = document.getElementById(id);
if(element.style.display == 'block') {
element.style.display = 'none';
} else {
element.style.display = 'block'
}
}
</script>
</h:body>
</html>
具体如何执行此操作将取决于您正在使用的 JSF 版本。有关旧 JSF 版本，请参阅此博客文章：JSF: working with component identifiers。
【讨论】：
您应该使用带有rendered 属性的<h:panelGroup ...> 标签。如果将true 设置为渲染，<h:panelGroup ...> 的内容将不会显示。您的 XHTML 文件应该是这样的：
<h:panelGroup rendered="#{userBean.showPassword}">
<h:outputText id="password" value="#{userBean.password}"/>
</h:panelGroup>
UserBean.java:
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class UserBean implements Serializable{
private boolean showPassword = false;
private String password = "";
public boolean isShowPassword(){
return showPassword;
}
public void setPassword(password){
this.password = password;
}
public String getPassword(){
return this.password;
}
}
【讨论】：
使用 h-namespace 中大多数（如果不是所有）标签上可用的“rendered”属性。
<h:outputText value="Hi George" rendered="#{Person.name == 'George'}" />
【讨论】：
一个明显的解决方案是使用 javascript（不是 JSF）。要通过 JSF 实现这一点，您应该使用 AJAX。在此示例中，我使用单选按钮组来显示和隐藏两组组件。在后面的 bean 中，我定义了一个布尔开关。
private boolean switchComponents;
public boolean isSwitchComponents() {
return switchComponents;
}
public void setSwitchComponents(boolean switchComponents) {
this.switchComponents = switchComponents;
}
当开关为真时，将显示一组组件，当为假时，将显示另一组。
<h:selectOneRadio value="#{backbean.switchValue}">
<f:selectItem itemLabel="showComponentSetOne" itemValue='true'/>
<f:selectItem itemLabel="showComponentSetTwo" itemValue='false'/>
<f:ajax event="change" execute="@this" render="componentsRoot"/>
</h:selectOneRadio>
<H:panelGroup id="componentsRoot">
<h:panelGroup rendered="#{backbean.switchValue}">
<!--switchValue to be shown on switch value == true-->
</h:panelGroup>
<h:panelGroup rendered="#{!backbean.switchValue}">
<!--switchValue to be shown on switch value == false-->
</h:panelGroup>
</H:panelGroup>
注意：在 ajax 事件中，我们渲染组件根。因为一开始没有渲染的组件不能是re-rendered on the ajax event。
另外，请注意，如果“componentsRoot”和单选按钮位于不同的组件层次结构下。您应该从根目录（表单根目录）引用它。
【讨论】：
检查下面的代码。 这是下拉菜单。在此，如果我们选择其他，则文本框将显示，否则文本框将隐藏。
function show_txt(arg,arg1)
{
if(document.getElementById(arg).value=='other')
{
document.getElementById(arg1).style.display="block";
document.getElementById(arg).style.display="none";
}
else
{
document.getElementById(arg).style.display="block";
document.getElementById(arg1).style.display="none";
}
}
The HTML code here :
<select id="arg" onChange="show_txt('arg','arg1');">
<option>yes</option>
<option>No</option>
<option>Other</option>
</select>
<input type="text" id="arg1" style="display:none;">
或者你可以查看这个链接 click here
【讨论】：