JSF 2 multiple select dropdown box example

By mkyong | Updated: August 29, 2012

Viewed: 986 (+8 pv/w)

Tags: dropdown jsf2

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

//JSF...
<h:selectManyMenu 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:selectManyMenu>

//HTML output...
<select name="j_idt6:j_idt8" multiple="multiple" 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>

However, the use of h:selectManyMenu tag is highly NOT recommended, because they do not display consistently in different internet browsers, see figures :

1. Internet Explorer 8

A tiny scroll bar to manipulate the dropdown box values.

2. FireFox 3.6.10

No scroll bar, look like a normal “textbox”, but you can click on the “textbox” and “drag up or down” or “key up and down” to manipulate the value.

3. Google Chrome 6.0.472.63

In Google Chrome, both << select element with "multiple" and size="1" attribute - "h:selectManyMenu” tag >> and << select element with "multiple" and size="total of records" attribute - "h:selectManyListbox” tag >> are display the exact layout.

Conclusion

Just forget about “h:selectManyMenu” tag, there is really no reason to use it. The “h:selectManyListbox” tag is a good alternative.

Reference

1. JSF <h:selectManyMenu /> JavaDoc
2. JSF 2 h:selectManyListbox example