JSF - h:selectManyListbox

h:selectManyListbox 標籤呈現一個型別為“select”的 HTML 輸入元素，並指定了 size 和multiple。

JSF 標籤

<h:selectManyListbox value = "#{userData.data}"> 
   <f:selectItem itemValue = "1" itemLabel = "Item 1" /> 
   <f:selectItem itemValue = "2" itemLabel = "Item 2" />
</h:selectOneListbox>

渲染輸出

<select name = "j_idt6:j_idt8" size = "2" multiple = "multiple">  
   <option value = "1">Item 1</option> 
   <option value = "2">Item 2</option> 
</select>

標籤屬性

序號	屬性和描述
1	id 元件的識別符號
2	binding 對元件的引用，可以在支援 Bean 中使用
3	rendered 布林值；false 抑制渲染
4	styleClass 級聯樣式表 (CSS) 類名
5	value 元件的值，通常是值繫結
6	valueChangeListener 對響應值更改的方法的繫結
7	converter 轉換器類名
8	validator 建立並附加到元件的驗證器的類名
9	required 布林值；如果為 true，則要求在關聯欄位中輸入值
10	accesskey 一個鍵，通常與系統定義的元鍵組合，使元素獲得焦點
11	accept 表單內容型別的逗號分隔列表
12	accept-charset 表單字元編碼的逗號或空格分隔列表。accept-charset 屬性使用名為acceptcharset 的 JSF HTML 屬性指定。
13	alt 非文字元素（如影像或小程式）的替代文字
14	charset 連結資源的字元編碼
15	coords 形狀為矩形、圓形或多邊形的元素的座標
16	dir 文字方向。有效值為ltr（從左到右）和rtl（從右到左）
17	disabled 輸入元素或按鈕的停用狀態
18	hreflang 使用href 屬性指定的資源的基本語言；hreflang 只能與href 一起使用。
19	lang 元素屬性和文字的基本語言
20	maxlength 文字欄位的最大字元數
21	readonly 輸入欄位的只讀狀態；可以在只讀欄位中選擇文字，但不能編輯
22	rel 當前文件與使用href 屬性指定的連結之間的關係
23	rev 從使用href 指定的錨點到當前文件的反向連結。屬性的值是連結型別的空格分隔列表
24	rows 文字區域中可見行的數量。h:dataTable 有一個rows 屬性，但它不是 HTML 傳遞屬性。
25	shape 區域的形狀。有效值：default、rect、circle、poly。（default 表示整個區域）
26	style 內聯樣式資訊
27	tabindex 指定選項卡索引的數值
28	target 開啟文件的框架的名稱
29	title 一個標題，用於輔助功能，描述一個元素。可視瀏覽器通常為標題的值建立工具提示
30	type 連結的型別；例如，stylesheet
31	width 元素的寬度
32	onblur 元素失去焦點
33	onchange 元素的值發生變化
34	onclick 滑鼠按鈕在元素上單擊
35	ondblclick 滑鼠按鈕在元素上雙擊
36	onfocus 元素獲得焦點
37	onkeydown 按鍵按下
38	onkeypress 按鍵按下並隨後釋放
39	onkeyup 按鍵釋放
40	onmousedown 滑鼠按鈕在元素上按下
41	onmousemove 滑鼠在元素上移動
42	onmouseout 滑鼠離開元素區域
43	onmouseover 滑鼠移到元素上
44	onmouseup 滑鼠按鈕釋放
45	onreset 表單重置
46	onselect 在輸入欄位中選擇文字
47	size 輸入欄位的大小

示例應用程式

讓我們建立一個測試 JSF 應用程式來測試上述標籤。

步驟	描述
1	在名為com.tutorialspoint.test 的包下建立一個名為helloworld 的專案，如JSF - 第一個應用程式章節中所述。
2	修改home.xhtml，如下所述。保持其餘檔案不變。
3	在 webapps 目錄中建立result.xhtml，如下所述。
4	在名為com.tutorialspoint.test 的包下建立一個名為UserData.java 的託管 Bean，如下所述。
5	編譯並執行應用程式，以確保業務邏輯按要求工作。
6	最後，以 war 檔案的形式構建應用程式，並將其部署到 Apache Tomcat Web 伺服器中。
7	使用適當的 URL 啟動您的 Web 應用程式，如下面的最後一步所述。

UserData.java

package com.tutorialspoint.test;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "userData", eager = true)
@SessionScoped
public class UserData implements Serializable {
   private static final long serialVersionUID = 1L;
   public String[] data = {"1","2","3"};

   public String[] getData() {
      return data;
   }

   public void setData(String[] data) {
      this.data = data;
   }
}

home.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:f = "http://java.sun.com/jsf/core"    
   xmlns:h = "http://java.sun.com/jsf/html">
   
   <head>
      <title>JSF Tutorial!</title>
   </head>
   
   <h:body>
      <h2>h:selectManyListbox example</h2>
      <hr />
      
      <h:form>
         <h3>List Box</h3> 
         <h:selectManyListbox value = "#{userData.data}">
            <f:selectItem itemValue = "1" itemLabel = "Item 1" />
            <f:selectItem itemValue = "2" itemLabel = "Item 2" />
            <f:selectItem itemValue = "3" itemLabel = "Item 3" />
            <f:selectItem itemValue = "4" itemLabel = "Item 4" />
            <f:selectItem itemValue = "5" itemLabel = "Item 5" />
         </h:selectManyListbox>
         <h:commandButton value = "Submit" action = "result" />
      </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:f = "http://java.sun.com/jsf/core"    
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:ui = "http://java.sun.com/jsf/facelets">
   
   <h:body>
      <h2>Result</h2>
      <hr />
      
      <ui:repeat value = "#{userData.data}" var = "s">		
         #{s}
      </ui:repeat>   	
   </h:body>
</html>

完成所有更改後，讓我們像在 JSF - 建立應用程式章節中所做的那樣編譯和執行應用程式。如果應用程式一切正常，這將產生以下結果。

選擇多個值並按下提交按鈕。我們選擇了四項。您將看到選定的結果。

jsf_basic_tags.htm

列印頁面