一、select表单的实现的例子
0x00 HTML代码实现select表单
首先我们来看一下使用纯粹的HTML代码实现最简单select表单,该如何实现,代码如下:
<select name="selectName">
<option value="chelsea">切尔西</option>
<option value="mu">曼联</option>
...
</select>
0x01 Struts2标签实现select选择菜单
当我们使用struts标签实现一个简单的select表单时,该如何实现,代码如下:
<s:set var="teamList" value="#{'chelsea':'切尔西','mu':'曼联'}"></s:set>
<s:select name="" list="teamList" headerKey="" headerValue="选择你喜欢的球队"></s:select>
0x02 使用Action中传递的列表生成select菜单
上面的例子所实现的select表单都是使用静态数据来完成的,然而我们在工作中需要使用动态的数据完成select表单的展示,该如何实现,代码如下:
Action代码:
public void TeamAction(){
private List<Team> teamList; // 需要在页面中显示的list
// 此处省略teamList的getter方法
// 此处省略teamList的setter方法
}
页面代码:
<s:select list="teamList" <!-- 从Action中传过来的需要进行显示的list -->
listKey="team_id" <!-- listKey相当于option中的value属性 -->
listValue="team_name" <!-- listKey相当与每个option的文本内容 -->
name="team.team_id" <!-- select的name属性 -->
value="chelsea"> <!-- select的默认选项,相当于在对应的option中设置selected="selected" -->
</s:select>
以上代码便是实现使用动态数据完成select表单的基本代码的demo,在这个过程中只使用了几个必须要用到的基本的标签属性。下面让我们看一下完整的select标签的属性。
二、select标签属性详解
0x00 常用属性
- list:创建列表的可迭代数据源, 必设项(list必须有值,如果没值则必须设置headerKey, headerValue)。如果该列表是一个Map(key, value), 那么Map的主键将作为选项()的”value”属性, 而该主键对应的值作为选项的文本内容.是必须设置的选项,如果是一个List或者是一个Set,那么可以通过listKey和listValue指定。
- headerKey:设置列表的题头主键值. 一定不能为空值! “’-1’”或”””是正确的取值, “”是错误的取值。
- headerValue:列表的题头选项值。
- listKey:列表数据源中元素对象的属性, 用于获取选项的值,对应于select标签中的value。
- listValue:表数据源中元素对象的属性, 用于获取选项的文本内容,对应于select标签中的option。
- name:元素的名字。
附表(所有属性):
名称 | 必填 | 缺省值 | 类型 | 描述 |
---|---|---|---|---|
emptyOption | false | false | Boolean | 是否在题头选项后面添加一个空的(–)选项 |
headerKey | false | Object/String | 设置列表的题头主键值. 一定不能为空值! “’-1’”或”””是正确的取值, “”是错误的取值. | |
headerValue | false | Object/String | 列表的题头选项值 | |
multiple | false | Object/String | 创建一个多选列表. 如果value属性指定了一个数组(正确的元素类型), 那么将预先选中数组中指定的多个选项. | |
size | false | Integer | 该组件列表框的大小 (显示元素的个数) | |
list | true | Object/String | 创建列表的可迭代数据源. 如果该列表是一个Map(key, value), 那么Map的主键将作为选项()的”value”属性, 而该主键对应的值作为选项的文本内容. | |
listKey | false | Object/String | 列表数据源中元素对象的属性, 用于获取选项的值 | |
listValue | false | Object/String | 列表数据源中元素对象的属性, 用于获取选项的文本内容 | |
theme | false | Object/String | 输出元素时使用的主题(theme)(不使用缺省的) | |
template | false | Object/String | 输出元素时使用的模板(template)(不使用缺省的) | |
cssClass | false | Object/String | 输出元素时的class属性 | |
cssStyle | false | Object/String | 输出元素时的css样式定义(译者注:就是html元素的style属性) | |
title | false | Object/String 在输出元素时设置html属性title | ||
disabled | false | Object/String | 在输出元素时设置html属性disabled | |
label | false | Object/String | 用于输出一个元素对应的label的表达式 | |
labelPosition | false | left | Object/String | 不赞成使用. |
labelposition | false | Object/String | 定义元素标签的位置(top/left) | |
requiredposition | false | Object/String | 定义required属性输出的位置(left | |
name | false | Object/String | 元素的名字 | |
required | false | false | Boolean | 如果设置为true, 在输出标签时将显示出此字段是必须输入的(译者注:如果使用默认模板,将会标示为”*”) |
tabindex | false | Object/String | 在输出元素时设置html属性tabindex | |
value | false | Object/String | 预设input元素的value属性. | |
onclick | false | Object/String | 在输出元素时设置html属性onclick | |
ondblclick | false | Object/String | 在输出元素时设置html属性ondblclick | |
onmousedown | false | Object/String | 在输出元素时设置html属性onmousedown | |
onmouseup | false | Object/String | 在输出元素时设置html属性onmouseup | |
onmouseover | false | Object/String | 在输出元素时设置html属性onmouseover | |
onmousemove | false | Object/String | 在输出元素时设置html属性onmousemove | |
onmouseout | false | Object/String | 在输出元素时设置html属性onmouseout | |
onfocus | false | Object/String | 在输出元素时设置html属性onfocus | |
onblur | false | Object/String | 在输出元素时设置html属性onblur | |
onkeypress | false | Object/String | 在输出元素时设置html属性 | |
onkeydown | false | Object/String | 在输出元素时设置html属性onkeydown | |
onkeyup | false | Object/String | 在输出元素时设置html属性onkeyup | |
onselect | false | Object/String | 在输出元素时设置html属性onselect | |
onchange | false | Object/String | 在输出元素时设置html属性onchange | |
tooltip | false | String | 设置元素的tooltip属性(译者注:tooltip为工具栏提示) | |
tooltipConfig | false | String | 设置tooltip属性的配置 | |
id | false | Object/String | id是定位元素时使用的. 对于UI和表单标签它会被用作HTML的id属性 |