您的位置：首页 > Web前端 > JavaScript

年月日三级联动（纯JS）

2016-07-06 08:07 603 查看
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript
相关文章推荐
新的分享
章节导航