js处理年月日下拉菜单变化

最新推荐文章于 2017-02-16 12:47:00 发布

del1214

最新推荐文章于 2017-02-16 12:47:00 发布

阅读量2.8k

点赞数

分类专栏： JavaScript 文章标签： class function date html

本文链接：https://blog.csdn.net/del1214/article/details/6706290

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

function onload()
{	
	var now = new Date();
	var year = now.getYear();//获得年份，不过是1900年到现在的数值
	year = year + 1900 - 18;//因为要4位数字年份又要求使用者大于18岁
	var yearList = document.getElementById("yearList");
	for(var i = 0;i < (year-(year - 80));i++){//为年份下拉菜单倒序输出年份
		var addYear = year - i;
		yearList.options[i] = new Option(addYear,addYear);
	}
	yearChange();
		
}


/**
 *	年份改变，没啥好说的，月日下拉菜单清空重排就行了
 */
function yearChange(){	
	var monthList = document.getElementById("monthList");
	monthList.innerHTML = "";
	for(var i = 0;i < 12;i++){
		monthList.options[i] = new Option(i+1,i+1); 
	}	
	var dayList = document.getElementById("dayList");
	dayList.innerHTML = "";
	for(var i = 0;i < 31;i++){
		dayList.options[i] = new Option(i+1,i+1);
	}
}

/**
 *	月份改变
 */
function monthChange(m){//m为改变的月份值
	var year = parseInt(document.getElementById("yearList").value);//转为整形
	var day = 31;
	switch(parseInt(m))//做一下月份的判断，为日期复制
	{
		case 1,3,5,7,8,10,12:day = 31;break;
		case 2:day = 28;break;
		case 4,6,9,11:day = 30;break;
	}
	if(day == 28)//二月份的情况下
	{
		if ((year%4==0 && year%100!=0) || (year%400==0))//闰年公式，判断是否为闰年
		{
			day = 29;
		}
	}
	var dayList = document.getElementById("dayList");
	dayList.innerHTML = "";
	for(var i = 0;i < day;i++)
	{
		dayList.options[i] = new Option(i+1,i+1);
	}
}

html代码

<select id="yearList" class="yearSelect" οnchange="yearChange()"></select>
<select id="monthList" class="nonYearSelect" οnchange="monthChange(this.value)"></select>
<select id="dayList" class="nonYearSelect"></select>