JSF Tutorial - JSF ListBox Multiple Select








The following code shows how to create Multiple selectable select box.

The h:selectManyListbox tag renders an HTML input element of the type "select" with size and multiple specified.

The following code of JSF

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

are rendered into the following HTML code. 

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




Tag Attributes

AttributeDescription
idid for the tag
bindingReference to the component used in a backing bean
renderedA boolean value; false would suppress rendering
styleClassCascading stylesheet (CSS) class name
valuevalue binding
valueChangeListenerA method binding that responds to value changes
converterConverter class name
validatorClass name of a validator attached to the component
requiredA boolean; if true, marks the tag as required
accesskeygives focus to an element
acceptComma-separated list of content types for a form
accept-charsetComma- or space-separated list of character encodings for a form.
altAlternative text for nontextual elements such as images
borderPixel value for an element's border width
charsetCharacter encoding for a linked resource
coordsCoordinates for an element whose shape is a rectangle, circle, or polygon
dirDirection for text. Valid values are ltr (left to right) and rtl (right to left).
disabledDisabled state of an input element or button
hreflangBase language of a resource specified with the href attribute;
langBase language of an element's attributes and text
maxlengthMaximum number of characters for text fields
readonlyRead-only state of an input field
styleInline style information
tabindexNumerical value specifying a tab index
targetThe name of a frame in which a document is opened
titleA title used for accessibility. Browsers typically create tooltips for the title's value
typeType of a link; for example, stylesheet
widthWidth of an element
onblurEvent handler for losing focus
onchangeEvent handler for value changes
onclickEvent handler for Mouse button clicked over the element
ondblclickEvent handler for Mouse button double-clicked
onfocusEvent handler for element received focus
onkeydownEvent handler for Key pressed
onkeypressEvent handler for Key pressed and released
onkeyupEvent handler for Key released
onmousedownEvent handler for Mouse button pressed
onmousemoveEvent handler for mouse moved
onmouseoutEvent handler for mouse left
onmouseoverEvent handler for mouse moved onto
onmouseupEvent handler for mouse button released
onresetEvent handler for form reset
onselectEvent handler for Text selected
immediateProcess validation early in the life cycle




Example

The following code is from demo.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"
      xmlns:f="http://java.sun.com/jsf/core"
      >
    <h:body>
      <h:form>
      Hard-coded with "f:selectItem" : 
       <h:selectManyListbox value="#{user.item}">
         <f:selectItem itemValue="A" itemLabel="Item A" />
         <f:selectItem itemValue="B" itemLabel="Item B" />
         <f:selectItem itemValue="C" itemLabel="Item C" />
       </h:selectManyListbox>
    <br /><br />
      <h:commandButton value="Submit" action="result" />
    <h:commandButton value="Reset" type="reset" />
      </h:form>
    </h:body>
</html>

The following code is from 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"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:body>
  Selected:  #{user.itemString}
        
    </h:body>
</html>

The following code is from UserBean.java.

package com.java2s.common;


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[] item = {"A", "B"};
  public String[] getItem() {
    return item;
  }

  public void setItem(String[] i) {
    this.item = i;
  }

  public String getItemString() {
    return Arrays.toString(item);
  }
}


Download SelectManyListBox_Hardcode_Value.zip

SelectManyListBox var

The following code is from UserBean.java.

package com.java2s.common;


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[] item = {"A", "B"};
  public String[] getItem() {
    return item;
  }

  public void setItem(String[] i) {
    this.item = i;
  }

  public String getItemString() {
    return Arrays.toString(item);
  }
  //Generated by Object array
  public static class Item{
    public String label;
    public String value;
    
    public Item(String l, String v){
      this.label = l;
      this.value = v;
    }
    
    public String getLabel(){
      return label;
    }
    
    public String getValue(){
      return value;
    }
    
  }
  
  public Item[] itemList;
  
  public Item[] getItemValue() {
    itemList = new Item[3];
    itemList[0] = new Item("Item A", "A");
    itemList[1] = new Item("Item B", "B");
    itemList[2] = new Item("Item C", "C");
    
    return itemList;
  }

}

The following code is from demo.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"
      xmlns:f="http://java.sun.com/jsf/core"
      >
    <h:body>
      <h:form>
      Generated by Object array and iterate with var :
       <h:selectManyListbox value="#{user.item}">
         <f:selectItems value="#{user.itemValue}" var="f"
         itemLabel="#{f.label}" itemValue="#{f.value}" />
       </h:selectManyListbox>
       
    <br /><br />
      <h:commandButton value="Submit" action="result" />
    <h:commandButton value="Reset" type="reset" />
      </h:form>
    </h:body>
</html>

The following code is from 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"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:body>
  Selected:  #{user.itemString}
        
    </h:body>
</html>


Download SelectManyListBox_var.zip

SelectManyListBox From Map

The following code is from UserBean.java.

package com.java2s.common;


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[] item = {"A", "B"};
  public String[] getItem() {
    return item;
  }

  public void setItem(String[] i) {
    this.item = i;
  }

  public String getItemString() {
    return Arrays.toString(item);
  }
  private static Map<String,Object> itemValue;
  static{
    itemValue = new LinkedHashMap<String,Object>();
    itemValue.put("Item A", "A"); //label, value
    itemValue.put("Item B", "B");
    itemValue.put("Item C", "C");
  }
  
  public Map<String,Object> getItemValue() {
    return itemValue;
  }

}

The following code is from demo.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"
      xmlns:f="http://java.sun.com/jsf/core"
      >
    <h:body>
      <h:form>
      Generated by Map :
       <h:selectManyListbox value="#{user.item}">
         <f:selectItems value="#{user.itemValue}" />
       </h:selectManyListbox>
    <br /><br />
      <h:commandButton value="Submit" action="result" />
    <h:commandButton value="Reset" type="reset" />
      </h:form>
    </h:body>
</html>

The following code is from 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"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:body>
  Selected:  #{user.itemString}
        
    </h:body>
</html>


Download SelectManyListBox_From_Map.zip

To RUN

Copy the generated WAR file from the target folder to Tomcat deployment folder and run Tomcat-Install-folder/bin/startup.bat.

After Tomcat finish starting, type the following URL in the browser address bar. 

http://localhost:8080/simple-webapp/demo.xhtml