javascript select获取年月日

如果需要实现类似下拉框选择年月日的控件，刚开始我想到的是最蠢的解决办法，就是给< select >中的每个都赋值，然后再显示，但是这种实在太浪费时间而且太蠢，于是我就想到了第二个方法，利用函数实现，如下：

	<script type="text/javascript">
		var birthYear = document.getElementById("birthYear");  //birthYear是select的标签，以下相同
		for (var year = 1990; year < 2020; year++) {
			birthYear.innerHTML += "<option value='" + year +  "'>" + year + "</option>";
		}

		var birthMonth = document.getElementById("birthMonth"); //使用了不同的实现模式
		for (var month = 1; month <= 12; month++) {
			var newOption = document.createElement("option");
			newOption.value = month;
			newOption.innerText = month;
			birthMonth.appendChild(newOption);
		}
		var birthDate = document.getElementById("birthDate");
		for (var date = 1; date < 32; date++) {
			birthDate.innerHTML += "<option value='" + date +  "'>" + date + "</option>";
		}
	</script>

测试之后，看似好像没有问题，但是仔细一想还是有漏洞的，日应该是随着年和月的改变而改变它的范围的，比如2019年2月有28天，但是2016年2月却有29天，但是上面的实现方案，每个月都是31天；也就是说，我们上面的实现方案并没有实现根据用户选择的年和月确定日的范围的功能，这是有漏洞的，所以来讲一下如何实现，代码如下：
首先是birthday.html:

<!DOCTYPE html>
<html>
<head>
	<title>关于年月日</title>
	<meta charset="utf-8">
	
</head>
<body>
	<select id="year" name ="birthYear"></select>年
	<select id="month" name="birthMonth"></select>月
	<select id="data" name="birthDate"></select>日

</body>
<script type="text/javascript" src="birthday.js"></script> //不能将导入js文件放入<head>里
</html>

birthday.js:

//这个函数是为了增加select下拉框中的项目
var addoption = function(selectag,startData,endData,defaultData){  
	selectag.options.length = 0;  //这是保证每次重新选择，页面重绘都会清除原来的option
	for(var i = startData; i < endData+1; i++){
		var option = document.createElement("option");
		option.value = i;
		option.innerText = i;
		if(i == defaultData){
		option.selected = "selected";
	}
	selectag.appendChild(option);
	}
};
//这个函数是为了动态获取日期
function initBirthDate(birthDateSelect, year, month) {
	var today = new Date(year, month, 0);
	var lastDate = today.getDate();
	addoption(birthDateSelect, 1, lastDate, 1);
};

//下面是取得该节点，然后调用上面的方法
var birthYear = document.getElementById('year');
var birthMonth =  document.getElementById('month');
var birthDate =  document.getElementById('data');
addoption(birthYear, 1990, 2020, 1998);
addoption(birthMonth, 1, 12, 1);
initBirthDate(birthDate, 2000, 1);

//以下两个函数是为了处理当option的值改变时，能正确的将选中的年和月传入
//initBirthDate()，然后重新确定日期的范围
year.onchange = function(event) {
	var years = year.value;
	var months = month.value;
	initBirthDate(birthDate, years, months);
};

month.onchange = function(event) {
	var years = year.value;
	var months = month.value;
	initBirthDate(birthDate, years, months);
};

执行截图如下：
javascript select获取年月日

javascript select获取年月日如上图就能动态获取到日期了

javascript select获取年月日

相关推荐