Main Tutorials

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 Author

author image
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.

Comments

Subscribe
Notify of
25 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Vimal Kumar
12 years ago

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.

Swati Kale
10 years ago

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

oscar
6 years ago

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

geison
8 years ago

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

guest
9 years ago

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

Gaurav
9 years ago

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
9 years ago

For default value in combobox i used:

and then generate my opcion from db

Hajji bornia
10 years ago

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

ABCD
10 years ago

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
10 years ago

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
10 years ago

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
10 years ago

very helpful

Nithisha Shukla
10 years ago

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

nelson
10 years ago

what render exactly means in this context?

Arun
10 years ago

Very Helpful !!

Master Wayne
11 years ago

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
11 years ago

cool!!

dli7mar
11 years ago

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

Thanks.

Vimal Kumar
12 years ago

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
12 years ago

Great job guys, please keep it up…

Pedro Vega
12 years ago

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
13 years ago

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.

Meh
6 years ago

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

Marcel
5 years ago
Reply to  Meh

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
9 years ago

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