Getting selected value of a SelectOneMenu
I'm testing the component "SelectOneMenu" on a jsf page. I'm populating this component dinamically though my ManageBean (that will get all Animals from database).
I would like to know if is possible to see the user selected item of that "SelectOneMenu" (combobox), I'm trying with value="#{animalsManage.animalSelect}" but it is only called on the beginning of the page. Also, I'm using an inputText to see the value of the selected intem of the "SelectOneMenu".
What I'm doing wrong?
JSF:
<body>
<ui:component>
<h:form>
<h:outputText value="Select one Mets File" />
<h:selectOneMenu id="combo" value="#{animalsManage.animalSelected}">
<f:selectItem itemLabel="Select..." noSelectionOption="true"/>
<f:selectItems value="#{animalsManage.allAnimals}" />
</h:selectOneMenu>
<h:inputText id="textbox" value="#{animalsManage.animalSelected }" />
</h:form>
</ui:component>
</body>
ManageBean:
@ManagedBean
@ViewScoped
public class AnimalsManage implements Serializable {
@EJB
private AnimalsFacadeREST animalsFacadeREST;
private String animalSelected;
private List< SelectItem> selectAnimals;
public List<SelectItem> getAllAnimals() {
List<Animals> al = animalsFacadeREST.findAll();
selectAnimals = new ArrayList< SelectItem>();
int i = 0;
for (Animals animal: al) {
selectAnimals.add(new SelectItem(i, animal.getName()));
i++;
}
return selectAnimals;
}
public String getAnimalSelected() {
return animalSelected;
}
public void setAnimalSelected(String animalSelected) {
this.animalSelected = animalSelected;
}
}
Answer
There are many solutions to the presented problem. I present here two basic ideas.
Server-side solution. Simply attach
<f:ajax>tag inside your<h:selectOneMenu>to update selected values and rerender user's choice, like in<h:selectOneMenu id="combo" value="#{animalsManage.animalSelected}"> <f:selectItem itemLabel="Select..." noSelectionOption="true"/> <f:selectItems value="#{animalsManage.allAnimals}" /> <f:ajax execute="combo" render="textbox" /> </h:selectOneMenu> <h:inputText id="textbox" value="#{animalsManage.animalSelected }" />If you like, you may also do some custom logic with selected element in ajax listener by specifying
listener="#{animalsManage.performCustomAjaxLogic}"of<f:ajax>tag.Client-side solution. Simply update element with id="textbox" on basic change event. So, if you use jQuery the solution will be
$('#combo').change(function() { $('#textbox').val($('#combo').val()); });Thought the client-side solution will bind only text value of your input component.