Change values of a selectOneMenu according to the choice of another selectOneMenu

4k Views Asked by At

I have a selectOneMenu with two items"Granted" and "Dismessed"

<p:panelGrid columns="2">
    <p:outputLabel value="Result: "/>
    <p:selectOneMenu id="omResult" value="#{opcoesMB.result}" style="width: 200px">
        <f:selectItem itemLabel="Granted" itemValue="1"/>
        <f:selectItem itemLabel="Dismessed" itemValue="2"/>
    </p:selectOneMenu>
</p:panelGrid>

I also have two selectOneMenu under that, one of them picks up items from a list called operationRestrictedList, in which case their use would be if the "Granted" item was selected.

<p:selectOneMenu id="omResultGranted" value="#{optionsMB.operationRestricted}" style="width: 200px">
    <f:selectItem itemLabel="Select..." itemValue="#{null}"/>
    <f:selectItems value="#{optionsMB.restricaoOperacaoList}" var="rest" itemLabel="#{rest.title}" itemValue="#{rest.id}"/>
</p:selectOneMenu>

the other takes a list of items irregularityList call, which would be the case if the item "desmissed" had been selected.

<p:selectOneMenu id="omResultDesmissed" value="#{optionsMB.irregularity}" style="width: 200px">
    <f:selectItem itemLabel="Select... " itemValue="#{null}"/>
    <f:selectItems value="#{opcoesMB.irregularilityList}" var="irregula" itemLabel="#{irregula.description}" itemValue="#{irregula.id}"/>
</p:selectOneMenu>

well I did not mean it like that, I wanted to have two selectOneMenu only, and the second was set as the item that was selected in the first selectOneMenu, but I have no idea how to do this, I am newbie in jsf, someone could help me give some idea how could I do this?

3

There are 3 best solutions below

1
On

For do this you just need an listener and update the second selectOneMenu.

XHTML :

<p:selectOneMenu id="id1" value="#{bean.item1}">
    <f:selectItems value="#{bean.list1}" var="item" itemLabel="#{item.name}" itemValue="#{item.id}" /> 
    <p:ajax update="id2" listener="#{bean.listener}" />
</p:selectOneMenu>

<p:selectOneMenu id="id2" value="#{bean.item2}">
    <f:selectItems value="#{bean.list2}" var="item" itemLabel="#{item.name}" itemValue="#{item.id}" />
</p:selectOneMenu>

And inside your bean you have just to feed your list with the value you needed.

Bean :

public void listener() {
    //Do some stuff for feeding you second list
    list2.add(...);
}
1
On

That second selectMenu could be filled dynamically using AJAX through a backing bean.

Example:

<h:selectOneMenu value="#{bean.selected}">
                <f:selectItem itemValue="#{null}" itemLabel="Select..." />
                <f:selectItem itemValue="one" />
                <f:selectItem itemValue="two" />
                <f:selectItem itemValue="three" />
                <f:ajax listener="#{bean.listener}" render="result" />
</h:selectOneMenu>

BackingBean:

@ViewScoped
public class Bean implements Serializable {

    private String selected;
    private String result;
    private List conditionalList; /*<-- You'll need setter and getter */

    public void submit() {
        System.out.println("submit");
    }

    public void listener(AjaxBehaviorEvent event) {
        System.out.println("listener");
        result = "called by " + event.getComponent().getClass().getName();
        /* Add to list here */
        conditionalList.add(getSelected());
    }

    public String getSelected() {
        return selected;
    }

    public void setSelected(String selected) {
        this.selected = selected;
    }

    public String getResult() {
        return result;
    }

}

Fill other selectMenu:

<p:selectOneMenu id="result" value="#{bean.selected2}">
    <f:selectItems value="#{bean.conditionalList}" var="item" itemLabel="#{item.name}" itemValue="#{item.id}" />
</p:selectOneMenu>
0
On

my solution ..

<p:panelGrid  id="pgResHighRisc"
           columns="2">
                                        <p:outputLabel value="Result: "/>
                                        <p:selectOneMenu value="#{optionsMB.typeResult}">
                                            <f:selectItem itemLabel="Granted"
                                                          itemValue="F"/>
                                            <f:selectItem itemLabel="Desmissed"
                                                          itemValue="J"/>
                                            <p:ajax event="change"
                                                    update="pgResHighRisc"/>
                                        </p:selectOneMenu>
                                        <p:outputLabel value="Restriction: "/>
                                        <p:selectOneMenu value="#{optionsMB.operationRestriction}"
                                                         style="width: 200px"
                                                         rendered="#{'F' eq optionsMB.typeResult}">
                                            <f:selectItems value="#{optionsMB.operationRestrictionList}"
                                                           var="oper"
                                                           itemLabel="#{oper.tittle}"
                                                           itemValue="#{oper.id}"/>
                                        </p:selectOneMenu>
                                        <p:selectOneMenu value="#{optionsMB.irregularity}" style="width: 200px"
                                                         rendered="#{'J' eq opcoesMB.typeResult}">
                                            <f:selectItems value="#{optionsMB.irregularityList}" var="irreg"
                                                           itemLabel="#{irreg.description}"
                                                           itemValue="#{irreg.id}"
                                                           />