先看一下效果 接下来直接看代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Option</title> <script> // 获取日期 var today = new Date(); // 获取当前年月日 var year = today.getFullYear(); var month = today.getMonth(); var data = today.getDate(); window.onload = function(){ // 循环年份并且显示到页面 for( var i = year+10 ; i >= year-10 ; i--){ var option = new Option( i , i ); // 如果年份等于当前年份 就默认选择 if( i == year ){ option.selected = true; } // 添加到id为year的select中 $('year').add(option); console.log($('year').value) } // 循环月份 for(var j = 1 ; j <= 12 ;j++){ var option = new Option( j , j ); if( ( j - 1 ) == month ) { option.selected = true; } $('month').add(option); } // 页面加载调用doChange事件 doChange(); } // 年份和月份改变的时候调用此事件 function doChange(){ // 把$('date')中的option长度变为0 $('date').options.length = 0; var length = 31; // 获取月份 var mon = $('month').value; // 如果是2月 if(mon == 2) { // 平年就是28 length = 28; // 获取年份 var num = $('year').value; // 判断是不是闰年 闰年就是29 if(( num % 4 == 0 && num % 100 != 0 ) || num % 400 == 0 ) { length++; } } // 定义正则判断月份 4 6 9 11 月 var reg = / [469]|^11$/; // 符合条件就是30天 if(reg.test(mon)) { length = 30; } // 然后循环 把值塞进去 for( var k = 1 ; k <= length ; k++ ){ var option = new Option( k , k ); $('date').add(option); } } // 封装获取id的简化函数 function $(id) { return document.getElementById(id); } </script> </head> <body> <select id="year" onchange="doChange()"></select> <select id="month" onchange="doChange()"></select> <select id="date"></select> </body> </html>