web中下拉列表的几种实现

转载 2006年06月23日 02:19:00

从数据库中获得数据List,将数据放到Request里面
        使用setAttribute(”AList”,AList)
A中有2个属性(String id,String value)

1.        使用JSTL的forEach方式
<select name=”xx” ……..>
<c:forEach items="${AList}" var="p" >
        <c:choose>
                <c:when test="${xxx == p.id}">
                        <option value='<c:out value="${p.id}"/>' selected="selected">
                                        <c:out value="${p.value}"/>
                        </option>
                </c:when>
        <c:otherwise>
                        <option value='<c:out value="${p.id}"/>'>
                                <c:out value="${p.value}"/>
                        </option>
                </c:otherwise>
        </c:choose>        
<c:forEach>
</select>

2.        使用struts的标签
<html:select property=”xxx”>
<html:options collection="AList" labelProperty="value" property="id" />
</html:select>

查一下struts的api文档,可以看到select 中选项有3 taglib可以使用。
第一种直接使用把所有选项写在中间。
<html:option value="0-15">0-15</html:option>
<html:option value="15-20" >15-20</html:option>
<html:option value="20-30" >20-30</html:option>
<html:option value="20 or above">30 or above</html:option>


第二种:把选项放在一个Collection中(这里使用List).在实际项目中,更多的是可能数据来源于db,文件等。这种情况用得比较多。

<html:options collection="AList" property="value" labelProperty="label"/>
把option放在list中的过程在Action中作处理
//prepare the age selector list.
List ageList =new ArrayList();
ageList.add(new LabelValueBean("0-15","0-15"));
ageList.add(new LabelValueBean("15-20","15-20"));
ageList.add(new LabelValueBean("20-30","20-30"));
ageList.add(new LabelValueBean("30 or above","30 or above"));
request.setAttribute("AList",AList);
这里使用了LabelValueBean,可以不用的,象
<html:options collection="AList" labelProperty="value" property="id" />
只要在AList中填入的bean有value和id属性就可以


第三种,把此list 作为Form 的一个属性.

<html:optionsCollection property="AList" />
在Form 中添加AList 的setter和getter. Form中作如下处理。
//the list can be a form property.
f.setAgeList(AList);

1.        从数据库中获得数据,你应该在Action里面取得数据后,将数据放到Request里面
2.        数据取出来后放在一个List或Collection或Map里面,我习惯用List
3.        从List或其它的容器中取数据应该用<html:options> 或<html:optionsCollection>
4.        <html:options> 和<html:optionsCollection>外层必须用<html:select property="">,所以这个属性你必须          在FormBean里定义
5.        由于你要用到这些标签,所以你必须定义FormBean
6.        从Action取数据,以List为例

List list = xxxxx;//从数据库中取得下拉列表中的数据
request.setAttribute("list",list);

在页面显示
<html:form action="xxxx">
...
<html:select property="xxx">
<html:options collection="list" labelProperty="下拉框中显示的内容,一般是name或其它相似属性" property="各选项对应的值,一般是id" />
</html:select>
...
</html:form>


补充一点点:

因为数据你要从 数据库去取, 所以一般在 action 里调用 DAO ,作为 request 的一个属性传到页面上; 这时一般用 <html:options .../> 标签

另外,如果数据不从数据库去取,而是代码固定的,则一般把这种放到 ActionForm 里,作为属性在页面上取,这时一般用 <html:optionsCollection ... />

几款极好的 JavaScript 下拉列表插件

几款极好的 JavaScript 下拉列表插件    表单元素让人爱恨交加。作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅、登陆注册到复杂的需要多页填写的信息提交功能,表单...
  • nic7968
  • nic7968
  • 2013年11月11日 09:38
  • 572

JavaScript特效——联动菜单

博主昨天发布了一篇关于JavaScript特效的文章,今天呢给大家带来联动菜单特效,这可能是一个系列哦!...
  • baochao95
  • baochao95
  • 2016年08月16日 13:21
  • 426

全国城市列表,HTML静态下拉框版

  • 2013年08月09日 14:09
  • 81KB
  • 下载

JS本地实现全国省市区二级、三级地址下拉框联动选择

  • 2013年12月21日 17:30
  • 59KB
  • 下载

web前端-CSS 下拉菜单 -025

基本下拉菜单当鼠标移动到指定元素上时,会出现下拉菜单。 下拉菜单实例 .dropdown { position: relative; display: inline-block; } ...
  • helloMr_wo
  • helloMr_wo
  • 2016年10月11日 13:18
  • 610

可输入的Web下拉列表框控件

vs2005提供的web下拉列表框 不支持输入,只能选择,我们可以继承该控件来支持输入功能,实现的原理很简单,就是增加一个textbox控件叠加在下拉列表框上,客户端通过脚本来同步这两个控件的值,先看...
  • weiky626
  • weiky626
  • 2007年07月31日 12:01
  • 7280

用java选择selenium下拉选择框的一个选项

用selenium 选择select下的option Please Choose one Advertiser Agent 可以用 Select userSelect=new Select(...
  • fabbychips
  • fabbychips
  • 2015年08月31日 17:04
  • 5128

JAVA组件大全 复选框、选项按钮、列表方框、下拉式列表的使用与介绍

7-1:使用JCheckBox组件:类层次结构图:  java.lang.Object    --java.awt.Component     --java.awt.Container       -...
  • rcyl2003
  • rcyl2003
  • 2007年05月25日 19:08
  • 12565

Web前端开发实战1:二级下拉式菜单之CSS实现

二级下拉式菜单在各大学校网站,电商类网站,新闻类网站等大型?网站很常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是可以实现这样的功能的。复杂的都是从基础效果上添加做出来的,原理和...
  • erlian1992
  • erlian1992
  • 2015年12月30日 20:47
  • 12272

Web前端开发实战3:二级下拉式菜单之jQuery实现

大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用。前面两篇博文分别是用CSS样式和JS实现 的,那么这篇就用jQuery来实现二级下拉式菜单。        使用JQuery实...
  • erlian1992
  • erlian1992
  • 2015年12月31日 19:42
  • 3271
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:web中下拉列表的几种实现
举报原因:
原因补充:

(最多只允许输入30个字)