您的位置：首页 > Web前端 > JavaScript

JavaScript实现年月日三级联动

2016-12-30 20:36 459 查看

初学Javascript,，写了一个实现年月日三级联动的小程序，记录一下：

<html>
<head>
<title>年月日</title>
</head>
<body>
请选择年份
<select id="years" onchange="showDate()">
<option name="year" value="1900">1900</option>
</select>年
请选择月份
<select id="months" onchange="showDate()">
<option name="month" value="1">1</option>
</select>月
请选择日期
<select id="dates">
<option>1</option>
</select>日
</body>

<script type="text/javascript">
//onclick获得改变前的值。onchange获取改变后的值。
var yearNode = document.getElementById("years");
for (var year1=1901; year1<=2016; year1++) {
var option1 = document.createElement("option");
option1.innerHTML = year1;
option1.setAttribute("value",year1);
yearNode.appendChild(option1);
}

var monthNode = document.getElementById("months");
for (var month1=2; month1<=12; month1++) {
var option2 = document.createElement("option");
option2.setAttribute("value",month1);
option2.innerHTML = month1;
monthNode.appendChild(option2);
}

function calculateDate(ddValue){
var dateNode = document.getElementById("dates");
dateNode.options.length = 1;
for (var date1=2; date1<=ddValue; date1++) {
var option3 = document.createElement("option");
option3.setAttribute("value",date1);
option3.innerHTML = date1;
dateNode.appendChild(option3);
}
}
//当年份或者月份改变的时候，就运行showDate()
function showDate(){
var mon = parseInt(document.getElementById("months").value);
var yea = parseInt(document.getElementById("years").value);

switch (mon) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
{
calculateDate(31);
}
break;

case 4:
case 6:
case 9:
case 11:
{
calculateDate(30);
}
break;

case 2:
{
if((0==yea%4 && 0!=yea%100) ||(0==yea%400))
{
calculateDate(29);
}
else
{
calculateDate(28);
}
}
}
}
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航