动态更新两个JSF PrimeFaces列表框

Posted 2021-03-30

我正在使用Netbeans上的JSF Primeface创建一个Web应用程序。我要做的是动态更新两个selectOneListBox项。更具体地说，我想根据我在第一个列表框中单击的值更新第二个列表框上的值。

例如：我有两个数据库，活动和子活动，我想在单独的列表框中显示它们。活动可以有“音乐，体育，户外，室内等”。我想在第一个列表框中显示这些值。当我点击其中一个时，我想获得与特定活动相关的子活动。因此，在子类别数据库中，存在子活动的列表，每个子活动具有与活动数据库的成员相关联的唯一标识符。当我单击活动列表框中的条目时，我想拉出特定的子活动并将其显示在第二个列表框中。

我能够从活动数据库中获取值并将其显示在第一个列表框中：

<p:selectOneListbox value="#{activityController.itemsAvailableSelectOne}">
    <f:selectItems value="#{activityController.items}" var="item"
        itemValue="#{item}" itemLabel="#{item.activityName}"/>
</p:selectOneListbox>

我如何实现第二个列表框？

答案

你可以试试这个：

你的第一个selectOneListbox：

<h:form>
<p:selectOneListbox value="#{activityController.itemsAvailableSelectOne}" id="listBox1">
   <f:selectItems value="#{activityController.items}" var="item"
    itemValue="#{item}" itemLabel="#{item.activityName}"/>
   <p:ajax listener="#{activityController.itemChange}"
                            update="listBox2" />
</p:selectOneListbox>

第二：

<p:selectOneListbox value="#{activityController.subItem}" id="listBox2">
   <f:selectItems value="#{activityController.subItems}" var="item"
    itemValue="#{item}" itemLabel="#{item.activityName}"/>       
</p:selectOneListbox>

支持Bean：

public void itemChange() {
 // load stuff based on selected item
}