首先声明如下:这个是从:
https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects
中学习object时,同时还有input标签时学习到的。
第一步:先放html代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-Object02</title>
</head>
<body>
<form>
<p class="datepicker">Select a date</p>
<div class="datefallback">
<label for="day">Day:</label>
<select id="day" name="day">
</select>
<label for="month">Month:</label>
<select id="month" name="month">
<option selected>January</option>
<option>Feburary</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<label for="year">Year:</label>
<select id="year" name="year">
</select>
</div>
</form>
</body>
<script>
var yearSelect=document.querySelector('#year');
var monthSelect=document.querySelector('#month');
var daySelect=document.querySelector('#day');
console.log('type of daySelect is ',typeof(daySelect));
if(monthSelect.value!='Null'){
//monthSelect.value是选择框中选择的值;
//populate the days and years dynamically;
// the months are always the same, therefore hardcoded;
populateDays(monthSelect.value);
populateYears();
}
function populateDays(month){
//delete the current set of day;
/*while(daySelect.firstChild){
console.log('daySelect.firstChild = ',daySelect.firstChild);
console.log(typeof(daySelect.firstChild));
console.log(daySelect.firstChild.value);
daySelect.removeChild(daySelect.firstChild);
}
*/
//create day <option> element
var dayNum;
if(month==='January'||month==='March'||month==='May'||month==='July'||month==='August'||month==='October'||month==='December'){
dayNum=31;
}else if(month==='April'||month==='June'||month==='September'||month==='November'){
dayNum=30;
}else{
(yearSelect.value-2016)%4===0?dayNum=29:dayNum=28;
}
for(i=1;i<=dayNum;i++){
var option=document.createElement('option');
option.textContent=i;
daySelect.appendChild(option);
}
}
function populateYears(){
//得到现在的日期年份;
var date=new Date();
console.log('date is =',date);
var year=date.getFullYear();
for(i=0;i<=100;i++){
var option=document.createElement('option');
option.textContent=year-i;
yearSelect.appendChild(option);
}
}
yearSelect.onchange=function(){
populateDays(monthSelect.value);
}
monthSelect.onchange=function(){
populateDays(monthSelect.value);
}
</script>
</html>
第二部分:显示结果
![在这里插入图片描述](https://img-blog.csdnimg.cn/5d893bb89c2049c3a86f689214703c8f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAdGFvanVuaHVzdDI=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)