三级联动日期选择

Posted 2020-10-09 我勒个去YCQ

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三级联动日期选择相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <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(){
        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);
            }
        }
    }
    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>

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

三级联动，日期选择

利用select实现年月日三级联动的日期选择效果

Android省市县三级联动真实项目抽出调用只需3行代码源码免积分下载

H5个性三级联动日期插件

ios收货地址三级联动选择

jquery时间日期三级联动