三级联动日历例题

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>

以上是关于三级联动日历例题的主要内容,如果未能解决你的问题,请参考以下文章

ajax实现省市区三级联动(例题)

基于查询的插件库 - 轮播/标签页/滚动条/下拉框/对话框/搜索提示/城市三级联动/日历_一组基于jQuery的小部件

三级联动怎么回显 javaweb

三级联动

ajax省市区三级联动

三级联动