In JSF, <h:selectOneListbox /> tag is used to render a single select listbox – HTML select element with “size” attribute.
//JSF...
<h:selectOneListbox value="#{user.favYear1}">
<f:selectItem itemValue="2000" itemLabel="Year1 - 2000" />
<f:selectItem itemValue="2010" itemLabel="Year1 - 2010" />
<f:selectItem itemValue="2020" itemLabel="Year1 - 2020" />
</h:selectOneListbox>
//HTML output...
<select name="j_idt6:j_idt8" size="3">
<option value="2000">Year1 - 2000</option>
<option value="2010">Year1 - 2010</option>
<option value="2020">Year1 - 2020</option>
</select>
h:selectOneListbox example
A JSF 2.0 example to show the use of “h:selectOneListbox” tag to render a single select listbox, and populate the data in 3 different ways :
- Hardcoded value in “f:selectItem” tag.
- Generate values with a Map and put it into “f:selectItems” tag.
- Generate values with an Object array and put it into “f:selectItems” tag, then represent the value with “var” attribute.
1. Backing Bean
A backing bean to hold and generate data for listbox values.
package com.mkyong;
import java.io.Serializable;
import java.util.LinkedHashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable{
public String favYear1;
public String favYear2;
public String favYear3;
//getter and setter methods
//Generated by Map
private static Map<String,Object> year2Value;
static{
year2Value = new LinkedHashMap<String,Object>();
year2Value.put("Year2 - 2000", "2000"); //label, value
year2Value.put("Year2 - 2010", "2010");
year2Value.put("Year2 - 2020", "2020");
}
public Map<String,Object> getFavYear2Value() {
return year2Value;
}
//Generated by Object array
public static class Year{
public String yearLabel;
public String yearValue;
public Year(String yearLabel, String yearValue){
this.yearLabel = yearLabel;
this.yearValue = yearValue;
}
public String getYearLabel(){
return yearLabel;
}
public String getYearValue(){
return yearValue;
}
}
public Year[] year3List;
public Year[] getFavYear3Value() {
year3List = new Year[3];
year3List[0] = new Year("Year3 - 2000", "2000");
year3List[1] = new Year("Year3 - 2010", "2010");
year3List[2] = new Year("Year3 - 2020", "2020");
return year3List;
}
}
2. JSF Page
A JSF page to demonstrate the use “h:selectOneListbox” tag.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
>
<h:body>
<h1>JSF 2 listbox example</h1>
<h:form>
1. Hard-coded with "f:selectItem" :
<h:selectOneListbox value="#{user.favYear1}">
<f:selectItem itemValue="2000" itemLabel="Year1 - 2000" />
<f:selectItem itemValue="2010" itemLabel="Year1 - 2010" />
<f:selectItem itemValue="2020" itemLabel="Year1 - 2020" />
</h:selectOneListbox>
<br />
2. Generated by Map :
<h:selectOneListbox value="#{user.favYear2}">
<f:selectItems value="#{user.favYear2Value}" />
</h:selectOneListbox>
<br />
3. Generated by Object array and iterate with var :
<h:selectOneListbox value="#{user.favYear3}">
<f:selectItems value="#{user.favYear3Value}" var="y"
itemLabel="#{y.yearLabel}" itemValue="#{y.yearValue}" />
</h:selectOneListbox>
<br />
<h:commandButton value="Submit" action="result" />
<h:commandButton value="Reset" type="reset" />
</h:form>
</h:body>
</html>
result.xhtml…
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
>
<h:body>
<h1>JSF 2 listbox example</h1>
<h2>result.xhtml</h2>
<ol>
<li>user.favYear1 : #{user.favYear1}</li>
<li>user.favYear2 : #{user.favYear2}</li>
<li>user.favYear3 : #{user.favYear3}</li>
</ol>
</h:body>
</html>
3. Demo
When “submit” button is clicked, link to “result.xhtml” page and display the submitted listbox values.
How to pre-select a listbox value?
The value of “f:selectItems” tag is selected if it matched to the “value” of “h:selectOneListbox” tag. In above example, if you set favYear1 property to “2010” :
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
public String favYear1 = "2010";
//...
The “favYear1” listbox, value “2010” is selected by default.
Download Source Code
Download It – JSF-2-Listbox-Example.zip (10KB)
Reference
About Author
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.
It crashes my app whatever I put from these examples. 🙁
How do you set the visible rows of a selectOneListbox. rows=”30″ doesn’t seem to work. rows: 30; in a .css doesn’t seem to work
It works after some efforts… I downloaded code and it works great! Thanks a lot.
Hey again! You are amazing, thank you very much for the info. You save me a lot of time.
As always an absolute clean, short and easy to understand tutorial. You just get to the point!
Thanks for your great work 🙂
Hello Mkyong and everybody:
I want to transfer one by one data from selectOneListbox to other selectOneListbox, I tried a lot of things but send me an error “null converter”
Thanks.
Hello Mkyong;
I like this post, i’d like that you help me if you cant, i make an application and i have a relation OneToMany, the relation is showed in JSF throught selectOneListbox, the problem is that is an object and send me a error de null converter, it would be something like this:
Where propietarios is a class, how can i send that object?
Thanks!
Sorry i didnt show the code, here this:
<h:selectOneMenu value="#{parcela.propietarioId}" id="propietario"> <f:selectItems value="#{parcela.listadoPropietarios}" var="c" itemLabel="#{c.nombre}" itemValue="#{c.id}" /> </h:selectOneMenu>Why f:selectItems doesn’t have attribute “var” for me???? I’m getting crazy
I found this http://jplmelanson.wordpress.com/2010/02/12/using-java-enums-as-selectitems/ that seems to be a good compliment to your article.
Cheers!
Hi JezzuitJake,
Thanks you for sharing the enum option for the “selectitems”, i didn’t know that 🙂