1

我有以下 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 库

4

2 回答 2

2

如果您不喜欢使用a4j库，您可以show/hide使用javascript如下所示的组件。将onchange事件添加到您的第一个selectOneMenu

<h:selectOneMenu value="#{myform.selection}" onchange="myFunction(this.value)">

将Ids 添加到您的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>
于 2012-12-11T10:26:14.787 回答
0

如果您没有任何限制，我建议您使用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重新计算属性。

于 2012-12-11T10:03:24.663 回答