`
610622106
  • 浏览: 12947 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

【转】web中下拉列表的几种实现

    博客分类:
  • web
阅读更多
【原文地址】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 ... />
分享到:
评论

相关推荐

    Ajax实现java web 中下拉列表二级联动

    在Java Web开发中,二级联动下拉列表是一种常见的交互功能,通常用于地区选择、类别分类等场景。这个功能使得用户在选择一级选项时,二级选项会动态更新,提供相关的子选项。Ajax(Asynchronous JavaScript and XML...

    树形下拉列表 递归实现

    树形下拉列表是一种在用户界面中常见的交互元素,它结合了传统的下拉列表和树状结构的特点,常用于展示层级关系的数据。在Web开发中,实现这样的功能通常需要前端和后端的协同工作。本篇文章将重点讲解如何通过递归...

    c#可输入的下拉列表框

    "C#可输入的下拉列表框"是一种交互式控件,它结合了传统的下拉列表功能和文本输入框的功能,允许用户既可以从中选择已有的选项,也可以自由输入新的值。这种控件在提高用户体验和数据输入灵活性方面起到了重要作用。...

    java web下开发二级级联下拉菜单(数据库实现的)

    在Java Web开发中,二级级联下拉菜单是一种常见的用户界面元素,用于提供层次结构的选择。这个场景中,我们利用数据库存储数据,并通过后端处理逻辑动态生成这些下拉菜单。下面将详细介绍如何使用MySQL数据库来实现...

    AJAX重构+级联下拉列表

    本项目聚焦于使用AJAX进行页面重构,特别是实现级联下拉列表,这是一种常见的用户界面元素,常见于地址选择、类别筛选等场景。 在级联下拉列表中,一个下拉框的选择会影响另一个下拉框的选项。例如,当你在第一个...

    全国各省市联动下拉列表

    全国各省市联动下拉列表是一种常见的前端交互设计,主要用于网页上的地址选择,用户可以在两个或多个下拉列表中逐级选择国家、省份、城市等信息,实现数据的联动筛选。这种设计常见于注册表单、地址填写、物流配送等...

    ajax+json+ashx实现下拉列表三级联动.rar

    在IT领域,尤其是在Web开发中,下拉列表的三级联动是一种常见的交互设计,它能够帮助用户在多个选项间快速导航并作出选择。本项目“ajax+json+ashx实现下拉列表三级联动”旨在利用jQuery、Ajax以及ASHX处理程序来...

    JQUREY实现自定义的下拉列表

    要实现自定义下拉列表,我们需要以下几个步骤: 1. **HTML结构**:创建基础的HTML结构,通常包括一个隐藏的`&lt;select&gt;`元素和一个可视化的显示区域,如一个`&lt;div&gt;`。例如: ```html ;"&gt; &lt;option value="option1"&gt;...

    bootstrap下拉列表美化

    在Bootstrap中,下拉列表(Dropdown)是一种常见的交互元素,常用于导航菜单、表单选择等场景。本篇文章将深入探讨如何利用Bootstrap进行下拉列表的美化,以提升用户体验。 首先,我们来了解Bootstrap下拉列表的...

    无限级、无刷新、联动下拉列表框

    在IT领域,尤其是在Web开发中,"无限级、无刷新、联动下拉列表框"是一种高效且用户体验良好的设计模式。这种技术通常应用于大型数据结构,如层级数据或分类系统,例如组织架构、地区层级或者产品分类等。在ASP.NET...

    省市联动下拉列表

    在实现省市联动下拉列表时,通常涉及以下几个关键技术点: 1. **数据存储**:首先,需要一个包含所有省份和城市的数据源。在提供的文件列表中,`App_Data`可能包含了这样的数据库文件或者JSON文件,用于存储省市...

    jQuery下拉列表框双向选择

    而“jQuery下拉列表框双向选择”则涉及到一种交互设计,允许用户在一个下拉列表中选择项,并同时将这些选择同步到另一个相关的下拉列表中,实现数据的双向同步。 要实现这样的功能,我们需要理解以下几个关键知识点...

    用JavaScript来美化HTML的select标签的下拉列表效果

    在现代网页设计中,select下拉列表是实现用户交互的一项基本元素,但在不同的浏览器中,其样式表现差异较大,且在自定义样式方面存在限制,尤其是无法完全通过CSS控制其外观。随着Web标准的推进,浏览器厂商对HTML...

    多選下拉列表框

    在IT领域,多选下拉列表框是一种常见的用户界面组件,它允许用户在下拉菜单中选择一个或多个选项。这种交互方式广泛应用于各种应用程序,如网页表单、桌面软件和移动应用,以提高用户体验并优化屏幕空间。下面将详细...

    JavaScript解析XML实现两级级联下拉列表

    在本文中,我们将深入探讨如何使用JavaScript来解析XML数据,并基于这些数据实现一个两级级联下拉列表。这种功能在Web开发中非常常见,尤其是在构建动态表单时,用户需要根据上一级的选择来筛选下一级的选项。我们将...

    模似下拉列表框

    在IT领域,模拟下拉列表框是一种常见的用户界面元素,它允许用户从预定义的一组选项中进行选择。这种交互方式在网页设计、桌面应用程序和移动应用中都非常常见。下面我们将详细探讨模拟下拉列表框的相关知识点。 ...

    手动样式仿select下拉列表框

    2. **JavaScript/jQuery**:JavaScript是一种广泛用于客户端Web开发的脚本语言,可以用于实现下拉列表的动态行为,如点击展开/关闭下拉选项、选中项的高亮、数据绑定等。如果使用jQuery库,可以简化DOM操作,提高...

    一个下拉列表, 还是不错的

    在IT行业中,下拉列表(Dropdown List)是一种常见的用户界面元素,它允许用户从一组预定义的选项中选择一个或多个值。这个标题“一个下拉列表,还是不错的”暗示了我们将探讨一个与下拉列表相关的实用示例,可能是...

    下拉树形列表

    在IT界,尤其是在前端开发领域,下拉树形列表是一种常见的交互元素,它结合了下拉菜单和树状结构的特点,使得用户可以在一个简洁的界面中进行多级选择。本篇将深入探讨“下拉树形列表”的相关知识点,以及如何在实际...

    无限分级下拉列表(无刷新)

    无限分级下拉列表是一种常见的前端交互设计,常用于网站或应用程序中的导航菜单、选择器等,使得用户可以方便地在多个层次的选项间进行选择,而无需页面整体刷新。无刷新意味着通过Ajax技术实现,这样可以提高用户...

Global site tag (gtag.js) - Google Analytics