JSF ajax替换下拉列表选择中的元素

我有一个包含两列的datatable，每列都是一个下拉列表。我希望它：

1） 根据在第一个下拉列表中选择的选项填充第二个下拉列表的选项

2） 如果将第一个下拉列表选择为“其他”，则第二个下拉列表将替换为文本框

下面是我的代码：

<p:column style="vertical-align: bottom;" headerText="Type">
   <h:selectOneMenu id="problemTypeDropdown" value="#{problem.type}">
        <f:selectItems value="#{backingBean.problemTypeList}"/>
            <p:ajax listener="#{backingBean.updateDescriptionDropdownList}"
                    update="problemDescriptionDropdown, problemDescText" />
            <f:attribute name="item" value="#{problem}"/>
            </h:selectOneMenu>
</p:column>
<p:column style="width: 200px; vertical-align: bottom;" headerText="Description">
    <h:selectOneMenu id="problemDescriptionDropdown"
                     value="#{problem.description}"
                     rendered="#{problem.type!='Other'}">
        <f:selectItems value="#{backingBean.descriptionDropdownList}"/>
    </h:selectOneMenu>
    <p:inputText id="problemDescText"
                 value="#{problem.description}"
                 rendered="#{problem.type=='Other'}"/>
</p:column>

现在，它可以根据第一个列表的选择填充第二个列表，但如果第一个列表为“其他”，则第二个列表不会被文本框替换

---

有人能告诉我我的代码出了什么问题以及如何修复它吗？非常感谢。

您需要在容器/面板中放置h:selectOneMenu和p:inputText，并在ajax事件后更新容器

    <p:column style="vertical-align: bottom;" headerText="Type">
        <h:selectOneMenu id="problemTypeDropdown" value="#{problem.type}">
            <f:selectItems value="#{backingBean.problemTypeList}"/>
                <p:ajax listener="#{backingBean.updateDescriptionDropdownList}"
                    update="problemDescPanel" />
                <f:attribute name="item" value="#{problem}"/>
        </h:selectOneMenu>
    </p:column>
    <p:column style="width: 200px; vertical-align: bottom;" headerText="Description">
        <h:panelGroup id="problemDescPanel">
            <h:selectOneMenu id="problemDescriptionDropdown"
                 value="#{problem.description}"
                 rendered="#{problem.type!='Other'}">
                <f:selectItems value="#{backingBean.descriptionDropdownList}"/>
            </h:selectOneMenu>
            <p:inputText id="problemDescText" rendered="#{problem.type=='Other'}"
                 value="#{problem.description}" />
        </h:panelGroup>
    </p:column>

出现错误：“无法找到表达式为“tableId:0:problemDescPanel”的组件，该表达式引用自“表单：tabView:tableId:0:problemTypeDropdown”。我已将更新路径更改为完整路径“表单：tabView:tableId:0:problemTypeDropdown”“但是它仍然显示相同的错误消息。在初始显示之后，您能否打开页面源代码并在每行上查找

problemDescPanel

的确切id？”？好吧，这是jsf和primefaces的标准id约定，但我可能错了。另外，请尝试使用

form:tabView:tableId:#{rowIndex}:problemDescPanel

作为

update

的完整路径。我尝试了。这是错误：“找不到表达式为”form:tabView:tableId:0:problemDescPanel“的组件，引用自”form:tabView:tableId:0:problemTypeDropdown“抱歉，事情太复杂了（感谢Balusc）。当像这样使用时，它可以正常工作：

update=“problemDescPanel“

不客气。我已经在mojarra 2.1.7和richfaces 4.3.1中多次使用了这种id符号/语法，但我想新版本会让事情变得简单一些。解决方案的问题是：id为“problemDescText”的组件最初没有呈现在页面上。因此，当您尝试更新/重新提交它时，找不到具有该id的组件，并且更新失败。您需要更新始终在页面上呈现的组件（本例中为“problemDescPanel”），并有条件地呈现嵌套在其中的组件。

    <p:column style="vertical-align: bottom;" headerText="Type">
        <h:selectOneMenu id="problemTypeDropdown" value="#{problem.type}">
            <f:selectItems value="#{backingBean.problemTypeList}"/>
                <p:ajax listener="#{backingBean.updateDescriptionDropdownList}"
                    update="problemDescPanel" />
                <f:attribute name="item" value="#{problem}"/>
        </h:selectOneMenu>
    </p:column>
    <p:column style="width: 200px; vertical-align: bottom;" headerText="Description">
        <h:panelGroup id="problemDescPanel">
            <h:selectOneMenu id="problemDescriptionDropdown"
                 value="#{problem.description}"
                 rendered="#{problem.type!='Other'}">
                <f:selectItems value="#{backingBean.descriptionDropdownList}"/>
            </h:selectOneMenu>
            <p:inputText id="problemDescText" rendered="#{problem.type=='Other'}"
                 value="#{problem.description}" />
        </h:panelGroup>
    </p:column>