Struts2 <s:doubleselect>级联下拉框 详解析
运行环境:myeclipse8.6+jboss5.1+jvm1.6先看最后目录结构:
直接上源码:
complexFormTag.jsp:
[html]
<%@ page language="java" contentType="text/html; charset=gb2312"pageEncoding="gb2312"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title>复杂表单标签使用范例</title>
<s:head />
</head>
<body>
<h3 align="left">doubleselect标签使用范例</h3>
<p>
<s:form name="doubleselectExample">
<s:doubleselect label="材料" headerValue="" headerKey="0"
list="itemList" listKey="itemId" listValue="item"
doubleName="materialId" doubleList="materialMap.get(top.itemId)"
doubleListKey="materialId" doubleListValue="material" />
</s:form>
</p>
</body>
</html>
解析:
若不使用Struts2,则需要结合JavaScript和HTML标签共同开发完成此功能。
doubleselect标签的功能是提供两个有级联关系的下拉框。用户选中第一个下拉框中的某选项,则第二个下拉框中的选项根据第一个下拉框被选中的某选项内容来决定它自己的下拉框选项内容,产生联动效果。
下面是doubleselect标签的属性列表:
名称
必 需
默认
类型
描述
list
是
无
Cellection Map
Enumeration Iterator array
要迭代的集合,使用集合中的元素来设置各个选项,如果list的属性为Map则Map的key成为选项的value,Map的value会成为选项的内容
listKey
否
无
String
指定集合对象中的哪个属性作为选项的value,该选项只对第一个列表框起作用
listValue
否
无
String
指定集合对象中的哪个属性作为选项的内容,该选项只对第一个列表框起作用
headerKey
否
无
String
设置当用户选择了header选项时,提交的的value,如果使用该属性,不能为该属性设置空值
headerValue
否
无
String
显示在页面中header选项内容
emptyOption
否
false
Boolean
multiple
否
false
Boolean
是否多选
size
否
无
Integer
显示的选项个数,该选项只对第一个列表框起作用
doubleId
否
无
String
指定第二个列表框的ID
doubleList
是
无
Cellection Map
Enumeration Iterator array
要迭代的集合
doubleListKey
否
无
String
指定集合对象中的哪个属性作为选项的value,该选项只对第二个列表框起作用
doubleListValue
否
无
String
指定集合对象中的哪个属性作为选项的内容,该选项只对第二个列表框起作用
doubleSize
否
无
Integer
选项个数
doubleName
否
无
String
指定第二个列表框的name映射
doubleValue
否
无
Object
第二个列表框的初始选种项
对于代码"materialMap.get(top.itemId)",其中的top返回的是材料类别map集合的value即材料list集合中的材料类对象实例。
注意:<s:doubleselect/>标签必须放在<s:form>中,放在普通<form>中会出错,而且s:form必须指定name属性。
另外,希望页面美观的话,希望s:doubleselect标签和左边的字对齐,则指定s:doubleselect属性theme="易做图"
希望两个select排成一行(默认是上下行的),则在<s:form></s:form>间加入css样式:
<style>
.nobr br{display:none}
</style>
然后在用<div class="nobr"></div>把<s:doubleselect .. />包起来就可以了!
下面通过一张图形象的表示联动关系:
对应的组件: &
补充:Web开发 , Jsp ,
- 更多JS疑问解答:
- 几个验证11位手机号码格式的js代码
- js把图片转换成 base64代码
- js把base代码转换成图片
- JS 将 base64编码的图片转化为图片文件
- js中的定时器
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为:<input type="" class="" onclick="'window.location...
- JS验证,这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并,重复的内容?
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js,代码中"object"和"Object"区别?
- js+flash实现网页图片切换效果,出现边框,单击激活此控件。