Choose multiple items from select box JSF

Question

I have a simple selectOneMenu box looks like below:

 <h:form> 
     <h3>Combo Box</h3>  
     <h:selectOneMenu value = "#{userData.data}"> 
        <f:selectItem itemValue = "1" itemLabel = "Item 1" /> 
        <f:selectItem itemValue = "2" itemLabel = "Item 2" /> 
        <f:selectItem itemValue = "3" itemLabel = "Item 3" /> 
        <f:selectItem itemValue = "4" itemLabel = "Item 4" /> 
        <f:selectItem itemValue = "5" itemLabel = "Item 5" />     
     </h:selectOneMenu>  
     <h:commandButton value = "+" /> 
  </h:form>  

What I would like to do is selecting multiple items from this box by clicking the + (add) button next to the box. This means when the user first choose the item in the box, then click to the +, I would like to display a new box below it with another + button so that user can add another items if they want, and the choosen item will be display on top of the new box with the - sign so that they can remove the choosen item. It works somehow like : this bootstrap form

Is it possible to have this kind of box in JSF? Thank you!

Answer 1

Yes this is possible in the same way they did it at the link.

If you need a panelGrid. If you click at the button the button calls the actionlistener and this creates your new selectonemenu. Remember to update your form or panelgrid to see it (this can be done in the managedbean too).

<h:form id="myform">
      <h:panelGrid id="myPanelGrid" columns="1">
                         <h:selectOneMenu value = "#{userData.data}"> 
                           <f:selectItem itemValue = "1" itemLabel = "Item 1" /> 
                           <f:selectItem itemValue = "2" itemLabel = "Item 2" /> 
                           <f:selectItem itemValue = "3" itemLabel = "Item 3" /> 
                           <f:selectItem itemValue = "4" itemLabel = "Item 4" /> 
                           <f:selectItem itemValue = "5" itemLabel = "Item 5" />     
                         </h:selectOneMenu>  
                      <h:commandButton value = "+" actionListener="#{managedBean.addSelectOneMenuToGrid()}"> 
                         <f:ajax execute="@form" render=":myForm" />
                      </h:commandButton>
      </h:panelGrid>
 <h:panelGrid id="myPanelGridToAdd" columns="1">
...
</h:panelGrid>
    </h:form>

and in your managed bean you add the new selectonemenu into your panelGrid programmatically after you clicked the button +.

public void addSelectOneMenuToGrid()
    {
        HtmlPanelGrid component = (HtmlPanelGrid) FacesContext.getCurrentInstance().getViewRoot().findComponent(":myform:myPanelGridToAdd" );
        SelectOneMenu newMenu = new SelectOneMenu();
        newMenu.setRendered(true);
        UISelectItems items = new UISelectItems();

       ....
        newMenu.getChildren().add(items);
       ...
    }

It is not easy to do. But what you need is not easy :D

Good luck. If you need more information about the managedbean part feel free to ask