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);
});
}
}
});
- 浏览: 96755 次
- 性别:
- 来自: 北京
最新评论
-
_大大大雄:
关于这个应用, 有些东西想要请教下您行么?
jsp 权限过滤器的应用 -
jptiancai:
博主,看了博客,收获很多,这个例子运行的时候,会报下面的错误: ...
jsp 权限过滤器的应用
发表评论
-
backbone学习资料
2015-07-20 16:37 573理论知识 backbone.js 初探http://we ... -
解析目录树
2015-06-19 19:31 458<ul id="test"> ... -
csv生成
2015-06-19 19:29 576<head> <meta -
网站性能优化解决方案
2015-06-15 14:40 690最近通过查阅资料,发现了一些其他可以提高性能优化的方案1. 使 ... -
八种创建等高列布局
2015-01-04 17:11 544高度相等列在Web页面设计中永远是一个网页设计师的需求。如果 ... -
多次调用同一异步方法体会出现使用相同的属性值问题
2014-11-27 17:56 1637《一》执行同一个方法体,里面有异步的逻辑代码,如果这个异步 ... -
时间的计算
2014-11-19 14:42 545using System; namespace Be ... -
async when then
2014-11-14 11:45 627function test1(){ var def ... -
异步并行串行编程 when
2014-11-14 11:40 661var data = { "51": ... -
HTML 与javascript自解码机制
2014-02-19 14:41 1211关于这个自解码机制,我们直接以一个例子(样例0)来进行说明: ... -
三列百分之比布局
2014-02-11 13:56 619三列布局自适应 -
JSp生重复提交解决方法
2014-01-08 15:42 660看了网上的,有几种方法: 1 在你的表单页里HEAD区加入这段 ... -
AMD 和 CMD 的区别有哪些?
2013-12-25 11:37 686AMD 是 RequireJS 在推广过程中对模块定义的规范化 ... -
firefox 专属css hack
2013-12-20 15:50 656之前只有ie6、ie6、firefox时,只要写!impo ... -
自适应网页设计
2013-11-29 10:39 741一、简单描述:随着移 ... -
跨浏览器兼容性总结
2013-11-25 10:16 3421一、 CSS样式兼容 1. F ... -
IE6 PNG背景透明解决方法(汇总)
2013-10-31 18:25 617IE6 PNG背景透明解决方法(汇总) 方法一: IE6 ... -
兼容IE6 min-width 的CSS 样式
2013-10-23 19:12 821IE6另外一个bug就是它不支持 min-width 属性. ... -
IE6 position:fixed bug (固定窗口方法)
2013-10-23 17:26 737今天herb同 学在twitter上 ... -
不确定图片大小让元素水平垂直居中
2013-10-23 16:53 730<!DOCTYPE html PUBLIC " ...
相关推荐
这是一个使用javaScript制作的级联下拉特效
javascript 级联下拉列表 正则表达式
javascript级联下拉列表实例代码(自写).docx
JavaScript动态级联下拉列表框,内有样例,仅供参考和学习
在使用JSP JavaScript过程中有很多的技巧与实现,那么如何构建二级级联下拉菜单呢,本文将会向你做一个源码上的介绍。
很有用的javascript四级级联下拉菜单,国家-省级-市级-街道地区,可以扩展为无限级联,样式可以自行设计。
JSP+JavaScript打造二级级联下拉菜单 简单的很哪 嘿嘿
NULL 博文链接:https://chenjia66804610.iteye.com/blog/576463
jsp出生日期三级级联下拉列表,今晚做的,呵呵!分享下!
JavaScript解析XML实现多级级联下拉列表
用JSP+JavaScript打造二级级联下拉菜单
jquery-casecader一个jquery级联下拉组件
1,Select对象。 属性 a,selectedIndex:用户选择的选项的下标,下标从0开始 b,length: 获取或者设置选项的个数 c,options: 返回一个数组,数组元素是Option对象 2,Options... 我写的一个级联下拉列表: 代码如下: 代
在javaScript中使下拉列表实现级联更新
级联下拉菜单jQuery插件,它允许您根据先前的选择来填充一组表单下拉菜单。演示版基本用法要使用该插件而不覆盖任何默认设置,您需要使用多个下拉(选择)菜单创建表单的结构。 在以下示例中,我正在使用<form>...
虽然也使用了Prototype.js来... 需求: 1、根据下拉菜单产品名称、产品包装的选择,右面的图片要进行相应的变化。 2、产品名称、产品包装、生产日期、生产批次都验证正确后,右图出现相应的提示。简要说明: 使用Protot
javascript 级联 选个国家可以下个下拉列表就出现这个国家的城市