Question

I have the following GUI elements: a dropdown menu to select whether you want to input text by yourself or you want to select from predefined texts.

<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>

How do I program the rendered conditions right?

UPDATE: When the form loads, 1 is already selected, so the inputText is rendered. The problem is that nothing happens when I change the selection to 2. We use a modified JSF library based on JSF 1.2

Answer 1

If you don’t like to use a4j library you can just show/hide the components by using javascript as below.
Add onchange event to your first selectOneMenu

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

Add Ids to your textBox and selectOneMenu as below.

<h:inputText value="#{myform.inputText}" rendered="#{myform.selection == 1}" id="myText"/>
<h:selectOneMenu value="#{myform.inputText}" rendered="#{myform.selection == 2}" id="mySelectMenu">

Finally your javascript function should be as below.

<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>