javascript自动生成年月日下拉选择框

最新推荐文章于 2025-06-15 13:51:00 发布

原创最新推荐文章于 2025-06-15 13:51:00 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript/jQuery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用JavaScript动态生成包含年、月、日的下拉选择框，适用于网页表单中日期输入，方便用户快速选择日期。

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

//自动生成年月日
function createSelect(af)
	{
	   var Years = document.getElementById("birthyear");
	   var Months = document.getElementById("birthmonth");
	   var Days = document.getElementById("birthday");
	   
	   var dt = new Date();
	  
	   if(af == 1)
	   {
			MaxYear = dt.getFullYear();
			
			MinYear = dt.getFullYear()-50;
		  
			for(var i = MinYear; i <= MaxYear; i++)
			{
				 var op = document.createElement("OPTION");
				 op.value = i;
				 op.innerHTML = i;
				 Years.appendChild(op);
			}
			Years.selectedIndex = 0;
	   
			for(var i = 1; i < 13; i++)
			{
				 var op = document.createElement("OPTION");
				 op.value = i;
				 op.innerHTML = i;
				 Months.appendChild(op);
			}
			Months.selectedIndex = 0;
	   }
	  
	   var date = new Date(Years.value, Months.value, 0);
	   var daysInMonth = date.getDate();
	   Days.options.length = 0;
	  
	   for(var i = 1; i <= daysInMonth ; i++)
	   {
			var op = document.createElement("OPTION");
			op.value = i;
			op.innerHTML = i;
			Days.appendChild(op);
	   }
	   Days.selectedIndex = 0;
	}

在页面调用

<select id="birthyear" name="birthyear" size="1" onChange="createSelect()"></select>
<select id="birthmonth" name="birthmonth" size="1" onChange="createSelect()"></select>
<select id="birthday" name="birthday" size="1" ></select>
<script type="text/javascript">createSelect(1);</script>