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に変更しても何も起こらないことです。JSF1.2に基づいて変更されたJSFライブラリを使用します

4

2 に答える 2

2

a4jライブラリを使用したくない場合は、以下のようshow/hideにコンポーネントのみを使用できjavascriptます。onchangeイベントを最初に追加するselectOneMenu

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

以下のようにandにIds を追加します。textBoxselectOneMenu

<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

制限がない場合は、a4jAJAX 機能を追加するために使用することをお勧めします。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 に答える