您的位置：名动网 > js多选按钮 JSF 列表框多选

js多选按钮 JSF 列表框多选

2023-03-04 21:20 Java教程

js多选按钮 JSF 列表框多选

js多选按钮

多选按钮是一种常见的用户界面元素，它可以让用户在一组选项中选择多个选项。在 HTML 中，多选按钮是使用标签来实现的。

使用 JavaScript 可以很容易地创建多选按钮，并且可以根据用户的选择来执行不同的功能。例如，可以使用 JavaScript 来创建一个表单，其中包含一些多选框，然后根据用户的选择来显示不同的内容。

// 创建一个新的多选框
var checkbox = document.createElement("input"); 
checkbox.type = "checkbox"; 
checkbox.name = "name"; 
checkbox.value = "value"; 
document.body.appendChild(checkbox);

当创建了多选框之后，就可以使用 JavaScript 来监听这些多选框上的事件（例如 onchange ）并执行相应的功能。例如：

 
// 监听 checkbox 的 onchange 事件 
checkbox.addEventListener("change", function() {  

    // 如果 checkbox 被选中  
    if (this.checked) {  

        // 显示新内容  
        document.getElementById("newContent").style.display = "block";  

    } else {  

        // 隐藏新内容  
        document.getElementById("newContent").style.display = "none";  

    }  
});

JSF 列表框多选

JSF教程 - JSF 列表框多选

以下代码显示了如何创建多个可选择选择框。

h:selectManyListbox标记渲染HTML输入元素的类型“select"与大小和多个指定。

下面的JSF代码

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

被渲染成以下HTML代码。

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

标签属性

属性	描述
id	标签的标识
binding	引用在backing bean中使用的组件
rendered	布尔值; false将抑制渲染
styleClass	级联样式表(CSS)类名称
value	值绑定
valueChangeListener	响应值更改的方法绑定
converter	转换器类名
validator	附加到组件的验证器的类名
required	布尔值; 如果为true，则根据需要标记标签
accesskey	给予一个元素的焦点
accept	表单的内容类型的逗号分隔列表
accept-charset	表单的字符编码的逗号或空格分隔列表。
alt	非文字元素(例如图片)的替代文字
border	元素的边框宽度的像素值
charset	链接资源的字符编码
coords	形状为矩形，圆形或多边形的元素的坐标
dir	文本的方向。有效值为 ltr (从左到右)和 rtl (从右到左)。
disabled	输入元素或按钮的禁用状态
hreflang	使用 href 属性指定的资源的基本语言;
lang	元素的属性和文本的基本语言
maxlength	文本字段的最大字符数
readonly	输入字段的只读状态
style	内联样式信息
tabindex	指定制表符索引的数值
target	打开文档的框架的名称
title	用于辅助功能的标题。浏览器通常为标题的值创建工具提示
type	链接类型; 例如样式表
width	元素的宽度
onblur	失去焦点的事件处理程序
onchange	值更改的事件处理程序
onclick	鼠标按钮的事件处理程序点击该元素
ondblclick	双击鼠标按钮的事件处理程序
onfocus	元素接收焦点的事件处理程序
onkeydown	按键的事件处理程序
onkeypress	键按下并释放的事件处理程序
onkeyup	Key的事件处理程序发布
onmousedown	鼠标按钮的事件处理程序
onmousemove	鼠标移动的事件处理程序
onmouseout	鼠标左的事件处理程序
onmouseover	鼠标移动到的事件处理程序
onmouseup	释放鼠标按钮的事件处理程序
onreset	表单重置的事件处理程序
onselect	选择文本的事件处理程序
immediate	在生命周期的早期进行过程验证

例子

以下代码来自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>

以下代码来自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>

下面的代码来自UserBean.java。

package cn..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);
  }
}

下载 SelectManyListBox_Hardcode_Value.zip

SelectManyListBox var

下面的代码来自UserBean.java。

package cn..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;
  }

}

以下代码来自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>

以下代码来自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>

下载 SelectManyListBox_var.zip

从映射选择列表框

下面的代码来自UserBean.java。

package cn..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;
  }

}

以下代码来自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>

以下代码来自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>

下载SelectManyListBox_From_Map.zip

运行

将生成的WAR文件从目标文件夹复制到Tomcat部署文件夹，并运行Tomcat-Install-folder/bin/startup.bat。

Tomcat完成启动后，在浏览器地址栏中键入以下URL。

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

阅读全文

以上是名动网为你收集整理的js多选按钮 JSF 列表框多选全部内容。

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。

js表单验证密码和确认密码 JSF 表单密码示例

2023-03-17 Java教程

JSF教程 -JSF表单密码示例h:inputSecret标签渲染类型为“password的HTML输入元素。以下JSF标记h:inputSecret value=password /被...
js 转换为数字 JSF 转换数字示例

2023-03-11 Java教程

JSF教程 -JSF转换数字示例f:convertNumber标记用于将字符串值转换为所需格式的数字。以下代码显示如何使用f:convertNumber标记f:...
jpa entitymanager删除 JPA 实体管理器删除示例

2023-03-09 Java教程

JPA教程 -JPA 实体管理器删除示例我们可以使用JPA中的EntityManager来删除一个实体。在下面的代码中，我们首先通过使用EntityMan...
java泛型方法具体实例 Java 泛型方法

2023-06-03 Java教程

Java教程 - 如何在Java中创建泛型方法可以创建一个包含在非泛型类中的通用方法。public class Main {static T, V extends T bool...
java嵌套类型无法隐藏外层类型 Java 嵌套类

2023-04-14 Java教程

Java教程 -Java嵌套类在任何类外部声明的类是顶级类。嵌套类是声明为其他类或作用域的成员的类。有四种嵌套类:静态成员类非静态...