关于web中下拉列表的几种实现方法
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于web中下拉列表的几种实现方法相关的知识,希望对你有一定的参考价值。
参考技术A 总结一下关于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>本回答被提问者和网友采纳
生成下拉框的几种方法总结——数据来源:枚举
上节介绍数据来源是数据库,这节介绍对枚举进行数据获取,形成下拉列表。
使用场景:某些状态值获取等,一般是数据量小,不需要在数据库中进行维护的数据集
1、前提要有枚举数据
package com.test.entity.neworder; import java.util.Objects; /** * 新订单状态 * * @author 刘涛 */ public enum NewOrderStateEunm { //已删除 已删除(0, "已删除"), //已创建 已创建(1, "已创建"), //已发布 已发布(2, "已发布"), Integer index; String state; NewOrderStateEunm(Integer index, String state) { this.index = index; this.state = state; } public Integer getIndex() { return index; } public String getState() { return state; } /** * 通过index获取value * * @param index 枚举索引 * @return 枚举值 */ public static String getValue(Integer index) { for (NewOrderStateEunm c : NewOrderStateEunm.values()) { if (Objects.equals(c.getIndex(), index)) { return c.getState(); } } return null; } /** * 通过value获取index * * @param state 枚举值 * @return 枚举索引 */ public static String getIndex(String state) { for (NewOrderStateEunm c : NewOrderStateEunm.values()) { if (Objects.equals(c.getState(), state)) { return c.index + ""; } } return "error"; } }
2、Controller层
/** * 获取订单状态类型 */ @RequestMapping("/getNewOrderStateForSelect") @ResponseBody public List<Map<String, Object>> getNewOrderStateForSelect() { return EnumUtil.getNewOrderStateEnum(); }
3、EnumUtil工具类文件中
package com.test.util; import com.test.entity.neworder.NewOrderStateEunm; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; public class EnumUtil { public static List<Map<String, Object>> getNewOrderStateEnum() { List<Map<String, Object>> lm = new ArrayList<>(); Map<String, Object> m; for (int i = 0; i < NewOrderStateEunm.values().length; i++) { m = new HashMap<>(); m.put("id", NewOrderStateEunm.values()[i].getIndex() + ""); m.put("type", NewOrderStateEunm.values()[i].getState()); lm.add(m); } return lm; } }
4、前端页面
<select type="text" id="stateCode" name="state" lay-filter="state" lay-search autocomplete="off" ></select>
5、由于我使用的是layui,所以js部分
<script type="text/javascript"> var $ = layui.jquery; $(function () { getNewOrderStateForSelect("stateCode"); }); /** * 获取订单状态列表 * @param selectId */ function getNewOrderStateForSelect(selectId) { var $selectId = $("#" + selectId); var url = "commonCtrl/getNewOrderStateForSelect"; $.get(url, function (data) { console.log(data); var info = "<option value=‘‘>请选择</option>"; for (var i = 0; i < data.length; i++) { info += "<option value=" + data[i].id + ">" + data[i].type + "</option>"; } $selectId.append(info); layui.use(‘form‘, function () { var form = layui.form; form.render(‘select‘); }) }) } </script>
完毕!
昨天还遇到一个比较复杂的获取方式:后台将枚举写的复杂了。如下:
for(int i=0;i< SettleTypeNewEnum.values().length;i++){ Map code=new HashMap(); code.put(SettleTypeNewEnum.values()[i].getType(),SettleTypeNewEnum.values()[i].getIndex()); payMethodCodeList.add(code); }
所以,前端获取到的是{[object object],[object object]},用json解析一下就是{[张三:12],[李四:23]}这种格式,
但是我想获取其中的值,直接调用对象中的属性,暂未发现有什么属性能直接获取到数据。
so,只能利用以下这种方式解决了:
function getNewPayMethodTypeForSelect(selectId) { var $selectId = $("#" + selectId); var url = "newSettleCtrl/getPayMethodCode"; $.get(url, function (data) { var info = "<option value=‘‘>请选择</option>"; $.each(data.data,function(i,v){ info += "<option value=" + v[Object.keys(v)[0]] + ">" + Object.keys(v)[0] + "</option>"; }); $selectId.append(info); layui.use(‘form‘, function () { var form = layui.form; form.render(‘select‘); }) }) }
以上是关于关于web中下拉列表的几种实现方法的主要内容,如果未能解决你的问题,请参考以下文章
miniui菜鸟求解答关于ComboBox,如何实现下拉列表从数据库获取