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

Hoang Phuoc Truong 发表于 Dev

黄福昌

我有一个包含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>

后备豆：

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

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

现在可以基于对第一个列表的选择来填充第二个列表，但是如果第一个列表是“ Other”，则第二个列表不会被文本框替换。

有人可以告诉我我的代码有什么问题以及如何解决吗？非常感谢你。

tt_emrah

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