In JSF, <h:selectManyListbox /> tag is used to render a multiple select listbox – HTML select element with “multiple” and “size” attribute.

//JSF...
<h:selectManyListbox value="#{user.favFood1}">
<f:selectItem itemValue="Fry Checken" itemLabel="Food1 - Fry Checken" />
<f:selectItem itemValue="Tomyam Soup" itemLabel="Food1 - Tomyam Soup" />
<f:selectItem itemValue="Mixed Rice" itemLabel="Food1 - Mixed Rice" />
</h:selectManyListbox>
//HTML output...
<select name="j_idt6:j_idt8" multiple="multiple" size="3">
<option value="Fry Checken">Food1 - Fry Checken</option>
<option value="Tomyam Soup">Food1 - Tomyam Soup</option>
<option value="Mixed Rice">Food1 - Mixed Rice</option>
</select>

h:selectManyListbox example

A JSF 2.0 example to show the use of “h:selectManyListbox” tag to render multiple 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 the multiple select listbox values. The property to hold the multi-selected listbox value, must be a type of Collection or Array; Otherwise it will hits the following error message

WARNING: Target model Type is no a Collection or Array
javax.faces.FacesException: Target model Type is no a Collection or Array
package com.mkyong;

import java.io.Serializable;
import java.util.Arrays;
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[] favFood1;
public String[] favFood2;
public String[] favFood3; //getter and setter methods... public String getFavFood1InString() {
return Arrays.toString(favFood1);
} public String getFavFood2InString() {
return Arrays.toString(favFood2);
} public String getFavFood3InString() {
return Arrays.toString(favFood3);
} //Generated by Map
private static Map<String,Object> food2Value;
static{
food2Value = new LinkedHashMap<String,Object>();
food2Value.put("Food2 - Fry Checken", "Fry Checken"); //label, value
food2Value.put("Food2 - Tomyam Soup", "Tomyam Soup");
food2Value.put("Food2 - Mixed Rice", "Mixed Rice");
} public Map<String,Object> getFavFood2Value() {
return food2Value;
} //Generated by Object array
public static class Food{
public String foodLabel;
public String foodValue; public Food(String foodLabel, String foodValue){
this.foodLabel = foodLabel;
this.foodValue = foodValue;
} public String getFoodLabel(){
return foodLabel;
} public String getFoodValue(){
return foodValue;
} } public Food[] food3List; public Food[] getFavFood3Value() { food3List = new Food[3];
food3List[0] = new Food("Food3 - Fry Checken", "Fry Checken");
food3List[1] = new Food("Food3 - Tomyam Soup", "Tomyam Soup");
food3List[2] = new Food("Food3 - Mixed Rice", "Mixed Rice"); return food3List;
} }

2. JSF Page

A JSF page to demonstrate the use “h:selectManyListbox” 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 multi-select listbox example</h1>
<h:form> 1. Hard-coded with "f:selectItem" :
<h:selectManyListbox value="#{user.favFood1}">
<f:selectItem itemValue="Fry Checken" itemLabel="Food1 - Fry Checken" />
<f:selectItem itemValue="Tomyam Soup" itemLabel="Food1 - Tomyam Soup" />
<f:selectItem itemValue="Mixed Rice" itemLabel="Food1 - Mixed Rice" />
</h:selectManyListbox> <br /><br /> 2. Generated by Map :
<h:selectManyListbox value="#{user.favFood2}">
<f:selectItems value="#{user.favFood2Value}" />
</h:selectManyListbox> <br /><br /> 3. Generated by Object array and iterate with var :
<h:selectManyListbox value="#{user.favFood3}">
<f:selectItems value="#{user.favFood3Value}" var="f"
itemLabel="#{f.foodLabel}" itemValue="#{f.foodValue}" />
</h:selectManyListbox> <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 multi-select listbox example</h1> <h2>result.xhtml</h2> <ol>
<li>user.favFood1 : #{user.favFood1InString}</li>
<li>user.favFood2 : #{user.favFood2InString}</li>
<li>user.favFood3 : #{user.favFood3InString}</li>
</ol>
</h:body> </html>

3. Demo

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

How to pre-select multiple listbox values ?

The value of “f:selectItems” tag is selected if it matched to the “value” of “h:selectManyListbox” tag. In above example, if you set favFood1 property to “Fry Checken” and “Tomyam Soup” :

@ManagedBean(name="user")
@SessionScoped
public class UserBean{ public String[] favFood1 = {"Fry Checken", "Tomyam Soup"}; //...

The “favFood1″ listbox values, “Fry Checken” and “Tomyam Soup” are selected by default.

JSF 2 multiple select listbox example的更多相关文章

  1. JSF 2 multiple select dropdown box example

    In JSF, <h:selectManyMenu /> tag is used to render a multiple select dropdown box – HTML selec ...

  2. 目录窗口多选Multiple Select in Catalog Window or arccatalog

    目录窗口多选Multiple Select in Catalog Window or arccatalog 商务合作,科技咨询,版权转让:向日葵,135-4855__4328,xiexiaokui#q ...

  3. html multiple select option 分组

    普通html方式展示<select name="viewType" style="width: 100%;height: 300px;" multiple ...

  4. JSF 2 listbox example

    In JSF, <h:selectOneListbox /> tag is used to render a single select listbox – HTML select ele ...

  5. ListBox控件例子

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ListBox.aspx.c ...

  6. Web页面中两个listbox的option的转移

    Html: <div><span>所选时间:</span><select id="xuanyongTimelb" style=" ...

  7. 前端插件之Bootstrap Dual Listbox使用

    工欲善其事,必先利其器 对于很多非专业前端开发来说写页面是非常痛苦的,借助框架或插件往往能够达到事半功倍的效果,本系列文章会介绍我在运维系统开发过程中用到的那些顺手的前端插件,如果你是想写XX管理系统 ...

  8. select框宽度与高度设置(实用版)

    在IE中只能使用 font-size: 限制 select 的高度.   同时使用 width:200px 限制宽度   size="20" 表示最多显示20个选项,超过20的需要 ...

  9. js select级联,上面分类,下面是内容

    js select级联,上面分类,下面是内容. js级联效果如下: 分类: 请选择 水果 蔬菜 其他 内容: // html和js代码如下:     <html>      <hea ...

随机推荐

  1. apk反编译(4)Smali代码注入

    转自 : http://blog.sina.com.cn/s/blog_5674d18801019i89.html 应用场景 Smali代码注入只能应对函数级别的移植,对于类级别的移植是无能为力的.具 ...

  2. 代码实现获取log日志和logcat使用方法

    代码实现获取log日志new Thread(new Runnable() {                        @Override                        publi ...

  3. Android之ScaleGestureDetector(缩放手势检测)

    一.概述 ScaleGestureDetector这个类是专门用来检测两个手指在屏幕上做缩放的手势用的,最简单的应用就是用来缩放图片或者缩放网页. 二.要求 利用ScaleGestureDetecto ...

  4. poj3307

    可以证明,每个符合的数都由2,3,5,7相乘得到. 依据猜想:下一个出现的数是由前面某个数乘上这几个数之一得到的新的数. 假设之前的数均满足序列,则因为下一个数必有2,3,5,7相乘得到,而这个数之前 ...

  5. 函数fil_io

    /********************************************************************//** Reads or writes data. This ...

  6. MySql和Hibernate中关于cascade的用法

    数据库里的cascade的用法,Mysql和Hibernate里面是不相同. 在数据库里,进行增加.修改.删除记录的时候,经常会涉及到父子关系的表. 例如:有省份表和城市表,其中城市表有一个外键pro ...

  7. return File

    public ActionResult DownloadMessage() { string strExportData = "无数据!"; byte[] data = Syste ...

  8. TIOBE 2015年5月编程语言排行榜 Visual Studio系列在上升

    TIOBE 编程语言社区排行榜是编程语言流行趋势的一个指标,每月更新,这份排行榜排名基于互联网上有经验的程序员. 课程和第三方厂商的数量.排名使用著名的搜索引擎(诸如 Google.MSN.Yahoo ...

  9. 【COCOS2DX-LUA 脚本开发之十二】Hybrid模式-利用AssetsManager实现在线更新脚本文件lua、js、图片等资源(免去平台审核周期)

    本站文章均为李华明Himi原创,转载务必在明显处注明:(作者新浪微博:@李华明Himi) 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-c ...

  10. 【 D3.js 高级系列 — 6.0 】 值域和颜色

    在[入门 - 第 10 章]作了一张中国地图,其中各省份的颜色值都是随意赋值的.如果要将一些值反映在地图上,可以利用颜色的变化来表示值的变化. 1. 思路 例如,有值域的范围为: [10, 500] ...