举报投诉联系我们 手机版 热门标签 名动网
您的位置:名动网 > 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键按下并释放的事件处理程序
onkeyupKey的事件处理程序发布
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 列表框多选全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 名动网 mdwl.vip 版权所有 联系我们