三级联动日历例题
Posted 大脸妹？
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三级联动日历例题相关的知识，希望对你有一定的参考价值。
<body>
<select id="year"></select>年
<select id="month"></select>月
<select id="day"></select>日 //设置年月日下拉框
</body>
</html>
<script>
var year = document.getElementById("year"); 定义年月日
var month = document.getElementById("month");
var day = document.getElementById("day");
var time = new Date(); 定义时间获取时间
year_now = time.getFullYear();
for(var i = year_now - 100; i < year_now + 100; i++) { 添加年份
year.innerHTML += "<option>" + i + "</option>"
}
for(var i = 1; i < 13; i++) { 添加月份
month.innerHTML += "<option>" + i + "</option>";
}
function days(max) { 根据月份定义天数
day.innerHTML = "";
for(var i = 1; i <= max; i++) {
day.innerHTML += "<option value=‘"+i+"‘>" + i + "</option>";
}
}
year.onchange = function(){ 给1、3、5、7、8、10、12月添加日期
if( month.selectedOptions[0].innerHTML==1 ||
month.selectedOptions[0].innerHTML==3 ||
month.selectedOptions[0].innerHTML==5 ||
month.selectedOptions[0].innerHTML==7 ||
month.selectedOptions[0].innerHTML==8 ||
month.selectedOptions[0].innerHTML==10 ||
month.selectedOptions[0].innerHTML==12
){
days(31);
}else if( 如果不是31天月份则添加30天
month.selectedOptions[0].innerHTML==4 ||
month.selectedOptions[0].innerHTML==6 ||
month.selectedOptions[0].innerHTML==9 ||
month.selectedOptions[0].innerHTML==11
){
days(30);
}else{ 给二月添加天数区分闰年平年
var year_selected = year.selectedOptions[0].innerHTML;
if((year_selected%4==0&&year_selected%100!=0)||year_selected%400==0){
days(29);
}else{
days(28);
}
}
}
month.onchange = function(){ 同上
if( month.selectedOptions[0].innerHTML==1 ||
month.selectedOptions[0].innerHTML==3 ||
month.selectedOptions[0].innerHTML==5 ||
month.selectedOptions[0].innerHTML==7 ||
month.selectedOptions[0].innerHTML==8 ||
month.selectedOptions[0].innerHTML==10 ||
month.selectedOptions[0].innerHTML==12
){
days(31);
}else if(
month.selectedOptions[0].innerHTML==4 ||
month.selectedOptions[0].innerHTML==6 ||
month.selectedOptions[0].innerHTML==9 ||
month.selectedOptions[0].innerHTML==11
){
days(30);
}else{
var year_selected = year.selectedOptions[0].innerHTML;
if((year_selected%4==0&&year_selected%100!=0)||year_selected%400==0){
days(29);
}else{
days(28);
}
}
}
</script>
以上是关于三级联动日历例题的主要内容，如果未能解决你的问题，请参考以下文章