<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div
{
height: 300px;
300px;
margin: 0px auto;
}
</style>
</head>
<body>
<div>
<select id="year" onChange="a()">
<option value="0" selected></option>
<!--<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>-->
</select>
年
<select id="month" onChange="b()">
<option value="0"></option>
<!--<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>-->
</select>
月
<select id="day">
<!--<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>-->
</select>
日
</div>
</body>
</html>
<script>
var runnian;
var opt1=Array();
var opt2=Array();
var year = document.getElementById("year");
for(var k=1980;k<=2017;k++)
{
opt1[k] = document.createElement('option');
year.value = k;
opt1[k].innerText = k;
year.appendChild(opt1[k]);
}
function a()
{
var year = document.getElementById("year");
var month = document.getElementById("month")
month.options.length=1;
var day =document.getElementById('day');
day.options.length=0;
if((year.value%4==0&&year.value%100!=0)||year.value%400==0)
{
runnian=true;
}
else
{
runnian=false;
}
for(var j=1;j<=12;j++)
{
opt1[j] = document.createElement('option');
month.value = j;
opt1[j].innerText = j;
month.appendChild(opt1[j]);
}
}
以上实现的是年月日 日期时间选择（自己的版本）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select id='year' onchange="addDay()"></select>
<select id="month" onchange="addDay()"></select>
<select id="date"></select>
</body>
</html>
<script>
var year_slt = document.getElementById('year');
var month_slt = document.getElementById('month');
var day_slt = document.getElementById('date');
var now = new Date();
now_year = now.getFullYear();
for(var i = now_year; i >= now_year - 70; i--) {
var opt_year = document.createElement('option');
opt_year.value = i;
opt_year.innerText = i;
year_slt.appendChild(opt_year);
}
for(var i = 1; i <= 12; i++) {
var opt_month = document.createElement('option');
opt_month.value = i;
opt_month.innerText = i;
month_slt.appendChild(opt_month);
}
function isRun(year) {
if((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
return 29;
} else {
return 28
}
}
function addDay() {
day_slt.innerHTML = '';
if(month_slt.value == 1 || month_slt.value == 3 || month_slt.value == 5 || month_slt.value == 7 || month_slt.value == 8 || month_slt.value == 10 || month_slt.value == 12) {
for(var i = 1; i <= 31; i++) {
var day = document.createElement('option');
day.value = i;
day.innerText = i;
day_slt.appendChild(day);
}
} else if(month_slt.value == 4 || month_slt.value == 6 || month_slt.value == 9 || month_slt.value == 11) {
for(var i = 1; i <= 30; i++) {
var day = document.createElement('option');
day.value = i;
day.innerText = i;
day_slt.appendChild(day);
}
} else {
for(var i = 1; i <= isRun(year_slt.value); i++) {
var day = document.createElement('option');
day.value = i;
day.innerText = i;
day_slt.appendChild(day);
}
}
}
</script>
以上是老师的版本，相较有多处更加简洁的写法，值得以后借鉴