EasyUI- combobox 实现下拉列表年份展示

使用EasyUI的combobox组件,通过jsp页面和java后台代码,展示了一个下拉列表,该列表仅包含年份数据,可用于日期选择或年龄筛选等功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 EasyUI实现:combobox 实现下拉列表展示年份

1. jsp 页面:

 

<input  title="年份" style="width: 99%;" type="text" name="feeDate" id="feeDate" value=""/>
<script type="text/javascript">
    //初始化数据
    $(function(){
	 //年份初始化
	 $('#feeDate').combobox({    
	    url:'orgbuild/party/djpartydues/djPartyDuesController/operation/queryYearList.json', 
	    valueField:'yearId',    
	    textField:'yearName'   
	 });  	
    }); 
</script>

 2. java代码

/**
 * 获取年份列表
 * 当前年份及向前取10年的年份数据
 */
@RequestMapping(value = "/operation/queryYearList")
public ModelAndView queryYearList(HttpServletRequest request, HttpServletResponse response) throws Exception{
	//获取当前年份 及前10年的记录
	 String newYear = DateUtils.getYear();
	 int currentYear = Integer.parseInt(newYear);	    
        String date = "[";
        for(int i=0; i<10; i++){
	  String yearId = Integer.toString(currentYear);
	  String yearName = Integer.toString(currentYear)+"年";
	  date += "{\"yearId\":\"" + yearId + "\",\"yearName\":\"" + yearName + "\"}";
	    if(i<9){
		  date +=",";
	    }
	     currentYear--;  
	  }
	 date += "]";
         response.setCharacterEncoding("UTF-8");
	 PrintWriter out = response.getWriter();
	 out.write(date);
	 out.close();
	 return null;
}

 

   

//返回json 
// [{"yearId":"2017","yearName":"2017年"},{"yearId":"2016","yearName":"2016年"},{"yearId":"2015","yearName":"2015年"},{"yearId":"2014","yearName":"2014年"},{"yearId":"2013","yearName":"2013年"},{"yearId":"2012","yearName":"2012年"},{"yearId":"2011","yearName":"2011年"},{"yearId":"2010","yearName":"2010年"},{"yearId":"2009","yearName":"2009年"},{"yearId":"2008","yearName":"2008年"}]

  

 

   展示效果:


 
 

 

 

### EasyUI Combobox 年度选择 示例 使用方法 为了创建一个用于年度选择的 EasyUI Combobox 组件,可以利用静态定义的一组年份作为数据源。下面是一个具体的实现方式: #### HTML 部分 ```html <select id="yearCombo" class="easyui-combobox" style="width:200px;"></select> ``` #### JavaScript 初始化部分 通过脚本初始化 combobox 控件并设置其属性。 ```javascript $(function() { // 定义年份数组 let years = []; const startYear = 1970; const endYear = new Date().getFullYear(); for (let year = startYear; year <= endYear; year++) { years.push({ id: year, text: year.toString() }); } $('#yearCombo').combobox({ data: years, // 数据源 valueField: 'id', // 值字段名 textField: 'text', // 显示文本字段名 panelHeight: 'auto', // 自动调整面板高度 editable: false // 设置为不可编辑模式 }); }); ``` 此代码片段首先构建了一个从 `startYear` 到当前年的数组对象列表,其中每个对象都含有两个键:`id` 和 `text`,分别对应于实际存储的值以及显示给用户的文字[^3]。之后配置了 combobox 的选项,指定了这些选项中的哪些应该用来填充控件本身及其下拉菜单的内容[^5]。 对于希望提供更友好的用户体验的应用程序来说,在页面加载时自动选取最近一年可能是有用的;这可以通过调用 `.combobox('setValue')` 方法来完成。 #### 默认选中当年操作 ```javascript $('#yearCombo').combobox('setValue', endYear); ``` 上述代码将在页面初次渲染完成后立即执行,从而确保最新一年总是处于选定状态。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值