JSF 2 dropdown box example

In JSF, <h:selectOneMenu /> tag is used to render a dropdown box – HTML select element with “size=1” attribute.


//JSF...
<h:selectOneMenu value="#{user.favCoffee1}">
   	<f:selectItem itemValue="Cream Latte" itemLabel="Coffee3 - Cream Latte" />
   	<f:selectItem itemValue="Extreme Mocha" itemLabel="Coffee3 - Extreme Mocha" />
   	<f:selectItem itemValue="Buena Vista" itemLabel="Coffee3 - Buena Vista" />
</h:selectOneMenu>

//HTML output...
<select name="j_idt6:j_idt8" size="1">	
	<option value="Cream Latte">Coffee3 - Cream Latte</option> 
	<option value="Extreme Mocha">Coffee3 - Extreme Mocha</option> 
	<option value="Buena Vista">Coffee3 - Buena Vista</option> 
</select> 

h:selectOneMenu example

A JSF 2.0 example to show the use of “h:selectOneMenu” tag to render a dropdow box, 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 the dropdown box 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 favCoffee1;
	public String favCoffee2;
	public String favCoffee3;
			
	public String getFavCoffee1() {
		return favCoffee1;
	}

	public void setFavCoffee1(String favCoffee1) {
		this.favCoffee1 = favCoffee1;
	}

	public String getFavCoffee2() {
		return favCoffee2;
	}

	public void setFavCoffee2(String favCoffee2) {
		this.favCoffee2 = favCoffee2;
	}

	public String getFavCoffee3() {
		return favCoffee3;
	}

	public void setFavCoffee3(String favCoffee3) {
		this.favCoffee3 = favCoffee3;
	}

	//Generated by Map
	private static Map<String,Object> coffee2Value;
	static{
		coffee2Value = new LinkedHashMap<String,Object>();
		coffee2Value.put("Coffee2 - Cream Latte", "Cream Latte"); //label, value
		coffee2Value.put("Coffee2 - Extreme Mocha", "Extreme Mocha");
		coffee2Value.put("Coffee2 - Buena Vista", "Buena Vista");
	}
	
	public Map<String,Object> getFavCoffee2Value() {
		return coffee2Value;
	}
	
	//Generated by Object array
	public static class Coffee{
		public String coffeeLabel;
		public String coffeeValue;
		
		public Coffee(String coffeeLabel, String coffeeValue){
			this.coffeeLabel = coffeeLabel;
			this.coffeeValue = coffeeValue;
		}
		
		public String getCoffeeLabel(){
			return coffeeLabel;
		}
		
		public String getCoffeeValue(){
			return coffeeValue;
		}
		
	}
	
	public Coffee[] coffee3List;
	
	public Coffee[] getFavCoffee3Value() {
		
		coffee3List = new Coffee[3];
		coffee3List[0] = new Coffee("Coffee3 - Cream Latte", "Cream Latte");
		coffee3List[1] = new Coffee("Coffee3 - Extreme Mocha", "Extreme Mocha");
		coffee3List[2] = new Coffee("Coffee3 - Buena Vista", "Buena Vista");
		
		return coffee3List;
	
	}
	
}

2. JSF Page

A JSF page to demonstrate the use “h:selectOneMenu” 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 dropdown box example</h1>
    	<h:form>
    	
	    1. Hard-coded with "f:selectItem" : 
   		<h:selectOneMenu value="#{user.favCoffee1}">
   			<f:selectItem itemValue="Cream Latte" itemLabel="Coffee3 - Cream Latte" />
   			<f:selectItem itemValue="Extreme Mocha" itemLabel="Coffee3 - Extreme Mocha" />
   			<f:selectItem itemValue="Buena Vista" itemLabel="Coffee3 - Buena Vista" />
   		</h:selectOneMenu>
		
		<br /><br />
	    
	    2. Generated by Map :
   		<h:selectOneMenu value="#{user.favCoffee2}">
   			<f:selectItems value="#{user.favCoffee2Value}" />
   		</h:selectOneMenu>
   		
	        <br /><br />
	    
	    3. Generated by Object array and iterate with var :
   		<h:selectOneMenu value="#{user.favCoffee3}">
   			<f:selectItems value="#{user.favCoffee3Value}" var="c"
   			itemLabel="#{c.coffeeLabel}" itemValue="#{c.coffeeValue}" />
   		</h:selectOneMenu>
   		
	        <br /><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 dropdown box example</h1>
    	
    	<h2>result.xhtml</h2>
    	
    	<ol>
    		<li>user.favCoffee1 : #{user.favCoffee1}</li>
    		<li>user.favCoffee2 : #{user.favCoffee2}</li>
    		<li>user.favCoffee3 : #{user.favCoffee3}</li>
    	</ol>
    </h:body>

</html>

3. Demo

jsf2-dropdown-example-1

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

f2-dropdown-example-2

How to pre-select a dropdown box value?

The value of “f:selectItems” tag is selected if it matched to the “value” of “h:selectOneMenu” tag. In above example, if you set “favCoffee1” property to “Extreme Mocha” :


@ManagedBean(name="user")
@SessionScoped
public class UserBean{

	public String favCoffee1 = "Extreme Mocha";

	//...

The “favCoffee1” dropdown box, values “Extreme Mocha” is selected by default.

Download Source Code

Download It – JSF-2-Dropdown-Box-Example.zip (10KB)

Reference

  1. JSF <h:selectOneMenu /> 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
25 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
24 Comment authors
MarcelMehoscargeisonguest Recent comment authors
newest oldest most voted
Vimal Kumar
Guest
Vimal Kumar

Mkyong, I tried in vain to bring about scroll bar in . But its not showing up.
I am populating values from a DB through child tag. Since there are more than 20 values being fetched from the DB, it is causing the dropdown drop ‘down’ till the end of the page.

If we cant have a scroll bar in selectOneMenu then what is the workaround?

please help me out on this.

oscar
Guest
oscar

very good thanks !!!!!!!!!!!!!

geison
Guest
geison

If I want my valoue to be the whole object and not the id a converter is always necessary?

guest
Guest
guest

Hi Mkyong,
Does jsf tags like – h:selectManyListbox and h:selectOneMenu perform output encoding?

Gaurav
Guest
Gaurav

Hi Mkyong, I am stuck with a problem in dropdown, i want a vertical scroll bar so that my dropdown list doesn’t get too long. How do i do that?? Please reply.

Kura
Guest
Kura

For default value in combobox i used:

and then generate my opcion from db

Hajji bornia
Guest
Hajji bornia

pouvant faire un url d’une page (par exemple Biologie .xhtml) dans en jsf

Swati Kale
Guest
Swati Kale

I need to display Conditional operators in the drop down.Whats the best approach? DO i have to create a backing bean for this? Please advise

ABCD
Guest
ABCD

Hi, I need to load drop down values from a table from database, what is the optimal way of doing this? (since set method gets invoked multiple times at server side after submit, and during screen refresh)

Guest
Guest
Guest

Hi Mkyong, If at all i need to load values into the drop down by querying a table from the database, what is the optimal way of doing it. Thanks in advance.

Mark Espiritu
Guest
Mark Espiritu

Can I exclude some items when using selectItems generation by Map? If yes, how?

Sample:

Map items are:

[coffee, mocha, tea, chocolate]

but I only want [coffee, mocha, chocolate] to be in the onemenu List.

srilatha
Guest
srilatha

very helpful

Nithisha Shukla
Guest
Nithisha Shukla

Thanks.. It’s really very helpful for First timers..

nelson
Guest
nelson

what render exactly means in this context?

Arun
Guest
Arun

Very Helpful !!

Master Wayne
Guest
Master Wayne

Hey bro why getter and setter when already public?
Managed Beans do not accept public fields.

public String favCoffee1;
public String favCoffee2;
public String favCoffee3;

Mostafizur Rahman
Guest
Mostafizur Rahman

cool!!

dli7mar
Guest
dli7mar

Hi Mkyong, how do I load your example project into a NetBeans/Glassfish environment?

Thanks.

Vimal Kumar
Guest
Vimal Kumar

Great job Mkyong!!

One question. I tried in vain to bring about scroll bar in . But its not showing up.
I am populating values from a DB through child tag. Since there are more than 20 values being fetched from the DB, it is causing the dropdown to drop ‘down’ till the end of the page.

If we cant have a scroll bar in selectOneMenu then what is the workaround?

Mkyong, please help me out on this.

Femi
Guest
Femi

Great job guys, please keep it up…

Pedro Vega
Guest
Pedro Vega

I just want 2 say… thanks!!!!!!!! You are my hero!!! After searching for a solution to populate my dropdown and have not success, I found this example you did and It worked great for me! Great job :-)

PD: sorry if my english skills are not very good.

Rob Juurlink
Guest
Rob Juurlink

I still think it is a weird JSF decision when using a map to use the key of the map als option label and the value as key of the selectbox list. Be aware of that weirdness. I have lost some time on that one.

trackback
JSF 2 valueChangeListener example

[…] JSF 2 dropdown box example Oracle Magazine – Free! […]

Meh
Guest
Meh

Thi aint a good example.
Just regular code without a clear objective. Next time try to explain what you are doing.

Marcel
Guest
Marcel

Sorry, but if this article is so, so, so difficult for you to understand, you don’t even know the basics. That’s why you stupidly criticized badly this wonderful article, since this subject is something you surely don’t know absolutely anything.

Amar Pokale
Guest
Amar Pokale

hi Mkyong I want to accept the data from another table and print that data on grid of another table ,…..can u help me,………!!!