JSF 2 listbox example

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 :

  1. Hardcoded value in “f:selectItem” tag.
  2. Generate values with a Map and put it into “f:selectItems” tag.
  3. 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

jsf2-listbox-example-1

When “submit” button is clicked, link to “result.xhtml” page and display the submitted listbox values.

jsf2-listbox-example-2

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

  1. JSF <h:selectOneListbox /> JavaDoc

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
9 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
8 Comment authors
John ComplainerOuroArthur GroheAlan BMJuan Felipe Recent comment authors
newest oldest most voted
John Complainer
Guest
John Complainer

It crashes my app whatever I put from these examples. :(

John Complainer
Guest
John Complainer

It works after some efforts… I downloaded code and it works great! Thanks a lot.

Ouro
Guest
Ouro

Hey again! You are amazing, thank you very much for the info. You save me a lot of time.

Arthur Grohe
Guest
Arthur Grohe

As always an absolute clean, short and easy to understand tutorial. You just get to the point!
Thanks for your great work :)

Alan BM
Guest
Alan BM

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.

Juan Felipe
Guest
Juan Felipe

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!

Juan Felipe
Guest
Juan Felipe

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>
Marco Lo Cascio
Guest
Marco Lo Cascio

Why f:selectItems doesn’t have attribute “var” for me???? I’m getting crazy

JezzuitJake
Guest
JezzuitJake

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!

trackback
JSF 2.0 Tutorials

[…] JSF 2 listbox example <h:selectOneListbox> single select listbox example. […]