【原文地址】
http://hi.baidu.com/muxil/blog/item/695c2ecef62c1d3cb700c8d8.html
web中下拉列表的几种实现
总结一下关于web上使用下拉框的情况
从数据库中获得数据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 ... />
分享到:
相关推荐
在Java Web开发中,二级联动下拉列表是一种常见的交互功能,通常用于地区选择、类别分类等场景。这个功能使得用户在选择一级选项时,二级选项会动态更新,提供相关的子选项。Ajax(Asynchronous JavaScript and XML...
树形下拉列表是一种在用户界面中常见的交互元素,它结合了传统的下拉列表和树状结构的特点,常用于展示层级关系的数据。在Web开发中,实现这样的功能通常需要前端和后端的协同工作。本篇文章将重点讲解如何通过递归...
"C#可输入的下拉列表框"是一种交互式控件,它结合了传统的下拉列表功能和文本输入框的功能,允许用户既可以从中选择已有的选项,也可以自由输入新的值。这种控件在提高用户体验和数据输入灵活性方面起到了重要作用。...
在Java Web开发中,二级级联下拉菜单是一种常见的用户界面元素,用于提供层次结构的选择。这个场景中,我们利用数据库存储数据,并通过后端处理逻辑动态生成这些下拉菜单。下面将详细介绍如何使用MySQL数据库来实现...
本项目聚焦于使用AJAX进行页面重构,特别是实现级联下拉列表,这是一种常见的用户界面元素,常见于地址选择、类别筛选等场景。 在级联下拉列表中,一个下拉框的选择会影响另一个下拉框的选项。例如,当你在第一个...
全国各省市联动下拉列表是一种常见的前端交互设计,主要用于网页上的地址选择,用户可以在两个或多个下拉列表中逐级选择国家、省份、城市等信息,实现数据的联动筛选。这种设计常见于注册表单、地址填写、物流配送等...
在IT领域,尤其是在Web开发中,下拉列表的三级联动是一种常见的交互设计,它能够帮助用户在多个选项间快速导航并作出选择。本项目“ajax+json+ashx实现下拉列表三级联动”旨在利用jQuery、Ajax以及ASHX处理程序来...
要实现自定义下拉列表,我们需要以下几个步骤: 1. **HTML结构**:创建基础的HTML结构,通常包括一个隐藏的`<select>`元素和一个可视化的显示区域,如一个`<div>`。例如: ```html ;"> <option value="option1">...
在Bootstrap中,下拉列表(Dropdown)是一种常见的交互元素,常用于导航菜单、表单选择等场景。本篇文章将深入探讨如何利用Bootstrap进行下拉列表的美化,以提升用户体验。 首先,我们来了解Bootstrap下拉列表的...
在IT领域,尤其是在Web开发中,"无限级、无刷新、联动下拉列表框"是一种高效且用户体验良好的设计模式。这种技术通常应用于大型数据结构,如层级数据或分类系统,例如组织架构、地区层级或者产品分类等。在ASP.NET...
在实现省市联动下拉列表时,通常涉及以下几个关键技术点: 1. **数据存储**:首先,需要一个包含所有省份和城市的数据源。在提供的文件列表中,`App_Data`可能包含了这样的数据库文件或者JSON文件,用于存储省市...
而“jQuery下拉列表框双向选择”则涉及到一种交互设计,允许用户在一个下拉列表中选择项,并同时将这些选择同步到另一个相关的下拉列表中,实现数据的双向同步。 要实现这样的功能,我们需要理解以下几个关键知识点...
在现代网页设计中,select下拉列表是实现用户交互的一项基本元素,但在不同的浏览器中,其样式表现差异较大,且在自定义样式方面存在限制,尤其是无法完全通过CSS控制其外观。随着Web标准的推进,浏览器厂商对HTML...
在IT领域,多选下拉列表框是一种常见的用户界面组件,它允许用户在下拉菜单中选择一个或多个选项。这种交互方式广泛应用于各种应用程序,如网页表单、桌面软件和移动应用,以提高用户体验并优化屏幕空间。下面将详细...
在本文中,我们将深入探讨如何使用JavaScript来解析XML数据,并基于这些数据实现一个两级级联下拉列表。这种功能在Web开发中非常常见,尤其是在构建动态表单时,用户需要根据上一级的选择来筛选下一级的选项。我们将...
在IT领域,模拟下拉列表框是一种常见的用户界面元素,它允许用户从预定义的一组选项中进行选择。这种交互方式在网页设计、桌面应用程序和移动应用中都非常常见。下面我们将详细探讨模拟下拉列表框的相关知识点。 ...
2. **JavaScript/jQuery**:JavaScript是一种广泛用于客户端Web开发的脚本语言,可以用于实现下拉列表的动态行为,如点击展开/关闭下拉选项、选中项的高亮、数据绑定等。如果使用jQuery库,可以简化DOM操作,提高...
在IT行业中,下拉列表(Dropdown List)是一种常见的用户界面元素,它允许用户从一组预定义的选项中选择一个或多个值。这个标题“一个下拉列表,还是不错的”暗示了我们将探讨一个与下拉列表相关的实用示例,可能是...
在IT界,尤其是在前端开发领域,下拉树形列表是一种常见的交互元素,它结合了下拉菜单和树状结构的特点,使得用户可以在一个简洁的界面中进行多级选择。本篇将深入探讨“下拉树形列表”的相关知识点,以及如何在实际...
无限分级下拉列表是一种常见的前端交互设计,常用于网站或应用程序中的导航菜单、选择器等,使得用户可以方便地在多个层次的选项间进行选择,而无需页面整体刷新。无刷新意味着通过Ajax技术实现,这样可以提高用户...