年月日三级联动(纯JS)

来源:互联网 发布:mysql minpoolsize 编辑:程序博客网 时间:2024/04/26 00:38
<script type="text/javascript" src="jquery-1.8.3.js"></script>

<script type="text/javascript">

    var currentDate = new Date();

    var currentYear;

    var currentMonth;

    $(function(){

        renderYearSelect();

        renderMonthSelect();

        renderDaySelect(currentMonth);
    })

    // 生成【年份】下拉框的内容
    function renderYearSelect(){
        
        currentYear = currentDate.getFullYear();

        for(var i = currentYear - 50; i < currentYear + 10; i++){
            $("#yearSelect").append("<option>"+i+"</option>");
        }

        $("#yearSelect option[value="+currentYear+"]").attr("selected", "selected");
    }

    function renderMonthSelect(){

        currentMonth = currentDate.getMonth() + 1;

        for(var i = 1; i <= 12; i++){
            $("#monthSelect").append("<option value="+i+">"+i+"</option>");
        }

        $("#monthSelect option[value="+currentMonth+"]").attr("selected", "selected");

    }

    // 生成【日】下拉框的内容    
    function renderDaySelect(month){

        $("#daySelect").empty();

        var currentDays = computeDays(month);
        
        for(var i = 1; i <= currentDays; i++){
            $("#daySelect").append("<option>"+i+"</option>");
        }


    }

    function computeDays(month){
        
        if(month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12){
            return 31;
        }
        else if(month == 4 || month == 6 || month == 9 || month == 11){
            return 30;
        }
        else{
            if( isLeapYear(currentYear)){
                return 29;
            }
            else{
                return 28;
            }
        }
    }

    function isLeapYear(year){

        if(year % 400 == 0){
            return true;
        }
        else if (year % 4 == 0 && year % 100 != 0)
        {
            return true;
        }
        else{
            return false;
        }
    }

    function changeMonth(){

        currentMonth = $("#monthSelect").val();
        
        renderDaySelect(currentMonth);
    }

    function changeYear(){

        currentYear = $("#yearSelect").val();

        changeMonth();
    }


</script>


<body>

<select id="yearSelect" style="width:100px;" onchange="changeYear()">
</select>

<select id="monthSelect" onchange="changeMonth()">
</select>

<select id="daySelect">
</select>

</body>





0 0