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

Question

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

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>

支持 bean：

public void updateDescriptionDropdownList(AjaxBehaviorEvent event) {
    ProblemItem di = (ProblemItem)event.getComponent().getAttributes().get("item");

    if (di.getType().equals("Other"))
        return;
    descriptionDropdownList = getDescriptionList(di.getType());
}

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

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

Answer 1

您需要将 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>