var DM = {
// 产生从start到end的顺序整数数组
range: function (start, end) {
var rge = [];
if(end > start) {
for(var i = 0, len = end-start+1; i < len; i++) {
rge[i] = start+i;
}
} else if(end < start) {
for(var len = start-end, i = len; i >= 0; i--) {
rge[start-end-i] = i+end;
}
}
return rge;
},
// 判断是否为闰年
isLeapYear: function(year) {
year = parseInt(year);
if(year % 400 == 0) return true;
else if (year % 4 == 0 && year % 100 != 0) return true;
else return false;
},
// 年月日选择器
getYMDOption: function(start, end, selectedIndex, defaultOption) {
var ymdList = this.range(start, end),
ymdOption = '<option>'+(defaultOption ? defaultOption : '请选择')+'</option>';
ymdList.forEach(function(item, i) {
if(selectedIndex && selectedIndex-1 == i) ymdOption += '<option selected="selected">'+item+'</option>';
else ymdOption += '<option>'+item+'</option>';
});
return ymdOption;
},
getDayOption: function(month, year, selectedIndex) {
switch(month) {
case '1':
case '3':
case '5':
case '7':
case '8':
case '10':
case '12':
return this.getYMDOption(1, 31, selectedIndex, '日');
break;
case '4':
case '6':
case '9':
case '11':
return this.getYMDOption(1, 30, selectedIndex, '日');
break;
case '2':
if(year && this.isLeapYear(year)) return this.getYMDOption(1, 29, selectedIndex, '日');
else return this.getYMDOption(1, 28, selectedIndex, '日');
break;
}
},
resetOption: function(defaultOption) {
return '<option>' + (defaultOption ? defaultOption : '请选择') + '</option>';
}
};
exports.DM = DM;
exports.initYMDComponent = function(yearOpt, monthOpt, dayOpt) {
this.yearOpt = yearOpt || $('birth-year');
this.monthOpt = monthOpt || $('birth-month');
this.dayOpt = dayOpt || $('birth-day');
if(!this.yearOpt) return;
XN.event.enableCustomEvent(this);
this.init();
}
exports.initYMDComponent.prototype = {
init: function() {
selectBoxInnerHTML(this.yearOpt, DM.getYMDOption(2013, 1900, '', '年'));
this.addYearEvent();
this.addMonthEvent();
this.bindYearEvent();
this.bindMonthEvent();
},
// 添加年份自定义事件
addYearEvent: function() {
var _self = this;
this.addEvent('yearChange', function(yearOpt) {
if(yearOpt.selectedIndex == 0) {
selectBoxInnerHTML(_self.monthOpt, DM.resetOption());
selectBoxInnerHTML(_self.dayOpt, DM.resetOption());
} else {
selectBoxInnerHTML(_self.monthOpt, DM.getYMDOption(1, 12, _self.monthOpt.selectedIndex, '月'));
_self.fireEvent('monthChange', _self.monthOpt);
}
});
},
// 添加月份自定义事件
addMonthEvent: function() {
var _self = this;
this.addEvent('monthChange', function(monthOpt) {
if(monthOpt.selectedIndex == 0) {
selectBoxInnerHTML(_self.dayOpt, DM.resetOption('日'));
} else {
var monthVal = _self.monthOpt.options[_self.monthOpt.selectedIndex].innerHTML,
yearVal = _self.yearOpt.options[_self.yearOpt.selectedIndex].innerHTML;
selectBoxInnerHTML(_self.dayOpt, DM.getDayOption(monthVal, yearVal, _self.dayOpt.selectedIndex));
}
});
},
// 添加年份 change 事件
bindYearEvent: function() {
var _self = this;
XN.event.addEvent(this.yearOpt, 'change', function(e) {
var el = XN.event.element(e);
_self.fireEvent('yearChange', el);
});
},
// 添加月份 change 事件
bindMonthEvent: function() {
var _self = this;
XN.event.addEvent(this.monthOpt, 'change', function(e) {
var el = XN.event.element(e);
_self.fireEvent('monthChange', el);
});
}
}
});
- 浏览: 100840 次
- 性别:
- 来自: 北京
最新评论
-
_大大大雄:
关于这个应用, 有些东西想要请教下您行么?
jsp 权限过滤器的应用 -
jptiancai:
博主,看了博客,收获很多,这个例子运行的时候,会报下面的错误: ...
jsp 权限过滤器的应用
发表评论
-
backbone学习资料
2015-07-20 16:37 663理论知识 backbone.js 初探http://we ... -
解析目录树
2015-06-19 19:31 503<ul id="test"> ... -
csv生成
2015-06-19 19:29 640<head> <meta -
网站性能优化解决方案
2015-06-15 14:40 756最近通过查阅资料,发现了一些其他可以提高性能优化的方案1. 使 ... -
八种创建等高列布局
2015-01-04 17:11 594高度相等列在Web页面设计中永远是一个网页设计师的需求。如果 ... -
多次调用同一异步方法体会出现使用相同的属性值问题
2014-11-27 17:56 1705《一》执行同一个方法体,里面有异步的逻辑代码,如果这个异步 ... -
时间的计算
2014-11-19 14:42 599using System; namespace Be ... -
async when then
2014-11-14 11:45 678function test1(){ var def ... -
异步并行串行编程 when
2014-11-14 11:40 727var data = { "51": ... -
HTML 与javascript自解码机制
2014-02-19 14:41 1279关于这个自解码机制,我们直接以一个例子(样例0)来进行说明: ... -
三列百分之比布局
2014-02-11 13:56 667三列布局自适应 -
JSp生重复提交解决方法
2014-01-08 15:42 712看了网上的,有几种方法: 1 在你的表单页里HEAD区加入这段 ... -
AMD 和 CMD 的区别有哪些?
2013-12-25 11:37 739AMD 是 RequireJS 在推广过程中对模块定义的规范化 ... -
firefox 专属css hack
2013-12-20 15:50 708之前只有ie6、ie6、firefox时,只要写!impo ... -
自适应网页设计
2013-11-29 10:39 793一、简单描述:随着移 ... -
跨浏览器兼容性总结
2013-11-25 10:16 3474一、 CSS样式兼容 1. F ... -
IE6 PNG背景透明解决方法(汇总)
2013-10-31 18:25 675IE6 PNG背景透明解决方法(汇总) 方法一: IE6 ... -
兼容IE6 min-width 的CSS 样式
2013-10-23 19:12 884IE6另外一个bug就是它不支持 min-width 属性. ... -
IE6 position:fixed bug (固定窗口方法)
2013-10-23 17:26 806今天herb同 学在twitter上 ... -
不确定图片大小让元素水平垂直居中
2013-10-23 16:53 776<!DOCTYPE html PUBLIC " ...
相关推荐
总的来说,制作JavaScript级联下拉特效是一个很好的实践项目,它涵盖了基本的JavaScript编程、DOM操作以及响应式设计的核心概念。通过这个过程,你可以提升你的JavaScript编程技巧,并为你的网页增添更丰富的交互性...
javascript 级联下拉列表 正则表达式
JavaScript动态级联下拉列表框是一种常见的前端交互设计,它允许用户在选择一个选项后,根据选择的结果动态更新下一个下拉列表框的内容。这种技术在数据筛选、表单填写等场景中广泛应用,能够提高用户体验,减少不必...
在网页设计中,"select级联下拉列表"是一种常见的交互元素,用于创建省市区选择、类别层级展示等场景。这种技术通常结合JavaScript(JS)、HTML5和jQuery库来实现,使得用户能够在多个下拉菜单之间进行联动选择,...
### JavaScript级联下拉列表实例解析 #### 一、引言 级联下拉列表是一种常见的Web表单组件,主要用于需要根据前一个选择的结果来动态更新后续选择项的情况。例如,在用户选择了一个国家之后,相应的省份下拉列表会...
在Web开发中,日期选择是一个常见的需求,而级联下拉菜单则是实现这一功能的一种优雅方式。这里我们讨论的“JQuery写的日期级联下拉菜单”是一个利用jQuery库实现的交互式用户界面组件,允许用户通过三个连续的下拉...
JavaScript四级级联下拉菜单是一种常见的网页交互设计,它允许用户在多个下拉菜单中进行选择,逐级筛选出最终的选项。这种设计通常用于表示层次结构的数据,如国家、省份、城市和区域等地理信息,也可以应用于其他...
级联下拉是一种常见的用户界面元素,特别是在网页和应用程序中,它被广泛用于提供多级选择,例如在国家、省份和城市的选取中。这个“级联下拉demo”显然是一个示例项目,旨在演示如何实现这种功能。让我们深入探讨...
在网页设计和开发中,`input`级联下拉列表是一种常见的交互元素,它允许用户在选择一个选项后,根据该选项的值动态地显示相关的第二个或更多下拉列表。这种设计模式通常用于处理层级关系的数据,如国家/地区、省份/...
在使用JSP JavaScript过程中有很多的技巧与实现,那么如何构建二级级联下拉菜单呢,本文将会向你做一个源码上的介绍。
网页表单级联下拉列表自动填写方法是指在网页表单中,多个下拉列表框之间存在关联关系,选择前一个下拉列表框的选项后,后一个下拉列表框才会出现相关的选项,这样可以实现自动填写省、市、县三级下拉列表框的功能。...
本文将详细解析如何使用jQuery来实现级联下拉列表,这是一种常见的Web前端功能,常用于数据关联选择场景,如地区选择(省市区)、分类选择等。 ### 核心概念:级联下拉列表 级联下拉列表是指当用户在一个下拉列表...
在本文中,我们将深入探讨如何使用AngularJS实现三级级联下拉选择框。AngularJS,一个由Google维护的JavaScript框架,被广泛用于构建单页应用(SPA),它提供了丰富的功能来处理复杂的前端交互,包括数据绑定、依赖...
在级联下拉菜单中,jQuery将帮助我们监听用户在第一个下拉菜单中的选择,并基于此触发Ajax请求获取关联数据。 接着,我们来看看ASP.NET的一般处理程序(.ashx)。这是一种HTTP处理模块,它可以像ASPX页面一样处理...
级联下拉列表是一种常见的前端交互设计,用户在一个下拉列表中做出选择后,第二个或更多的下拉列表会根据前一个选择动态地加载相关数据。这通常用于处理有层级关系的数据,如国家-城市-区县的选择,或者类别-子类别-...
在网页开发中,级联下拉列表是一种常见的交互设计,它允许用户在选择一个选项后,根据该选项的值动态加载下一个下拉列表的内容。这种功能通常用于展示层级关系的数据,如国家-省份-城市这样的地理信息。在本示例中,...
1. **级联下拉列表**: 由多个下拉列表组成,用户在选择第一个下拉列表的选项后,后面的下拉列表会根据前一个选项的选择动态更新显示内容。 2. **JSON数据源**: 级联下拉列表的数据通常存储为JSON格式,每个对象...
在本文中,我们将深入探讨如何在JSP(JavaServer Pages)中实现一个基于JavaScript的出生日期三级级联下拉列表。这种功能常用于用户注册、个人信息填写等场景,让用户能够方便地选择他们的出生年、月和日。 首先,...
级联下拉列表是一种常见的前端交互设计,常用于如地区选择、分类筛选等场景,它使得用户能够通过一个下拉菜单的选择触发另一个下拉菜单的内容更新。在这个案例中,我们只用五句代码就能实现这样的功能,这充分体现了...
在JavaScript编程中,实现无限级联下拉列表是一项常见的需求,尤其在构建多级导航菜单、组织结构或者层级关系的数据展示时。无限级联下拉列表允许用户逐级选择,每一级的选择会影响到下一级的显示内容。下面我们将...