Question

我有以下GUI元素：一个下拉菜单，用于选择是自己输入文本还是要从预定义文本中进行选择。

<h:form id="test">
<div>
  <h:outputLabel value="Please select:" />
  <h:selectOneMenu value="#{myform.selection}">
    <f:selectItem itemValue="1" itemLabel="Input text" />
    <f:selectItem itemValue="2" itemLabel="Select from predefined texts" />
  </h:selectOneMenu>
</div>
<div>
  <h:outputLabel value="Your text: " />
  <h:inputText value="#{myform.inputText}" rendered="#{myform.selection == 1}" />
  <h:selectOneMenu value="#{myform.inputText}" rendered="#{myform.selection == 2}">
    <f:selectItem itemValue="11" itemLabel="Preselected text 1" />
    <f:selectItem itemValue="22" itemLabel="Preselected text 2" />
  </h:selectOneMenu>
</div>
</h:form>

如何正确编程渲染条件？

更新：加载表单时，已选择1，因此将呈现inputText。问题是当我将选择更改为2时没有任何反应。我们使用基于JSF 1.2的修改过的JSF库

Answer 1

如果您不想使用a4j库，可以show/hide使用javascript如下onchange。将selectOneMenu个活动添加到您的第一个<h:selectOneMenu value="#{myform.selection}" onchange="myFunction(this.value)">

Id

将textBox添加到您的selectOneMenu和<h:inputText value="#{myform.inputText}" rendered="#{myform.selection == 1}" id="myText"/> <h:selectOneMenu value="#{myform.inputText}" rendered="#{myform.selection == 2}" id="mySelectMenu">，如下所示。

javascript

最后，您的<script> function myFunction(selection) { if(selection == 1) { document.getElementById("test:myText").style.display = ""; document.getElementById("test:mySelectMenu").style.display = "none"; } else { document.getElementById("test:myText").style.display = "none"; document.getElementById("test:mySelectMenu").style.display = ""; } } </script>功能应如下所示。

{{1}}

Answer 2

如果您没有任何限制，我建议使用a4j添加AJAX功能。在使用JSF 1.2时，您需要使用RichFaces 3.3.X库并在JSF文件中添加此标记：

<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>

然后使用a4j:support以这种方式修改代码：

<h:form id="test">
<div>
  <h:outputLabel value="Please select:" />
  <h:selectOneMenu value="#{myform.selection}">
    <f:selectItem itemValue="1" itemLabel="Input text" />
    <f:selectItem itemValue="2" itemLabel="Select from predefined texts" />
    <a4j:support event="onchange" reRender="textSection" ajaxSingle="true"/>
  </h:selectOneMenu>
</div>
<div>
  <h:outputLabel value="Your text: " />
  <a4j:outputPanel id="textSection">
      <h:inputText value="#{myform.inputText}" rendered="#{myform.selection == 1}" />
      <h:selectOneMenu value="#{myform.inputText}" rendered="#{myform.selection == 2}">
        <f:selectItem itemValue="11" itemLabel="Preselected text 1" />
        <f:selectItem itemValue="22" itemLabel="Preselected text 2" />
      </h:selectOneMenu>
  </a4j:outputPanel>
</div>
</h:form>

当用户从selecOneMenu更改选择时，现在包装您要显示/隐藏的组件的a4j:outputPanel将被重新计算，并且将重新计算rendered属性。

JSF渲染条件

2 个答案: