利用jQuery动态生成年月日级联

最新推荐文章于 2025-06-05 12:50:38 发布

zhy前端攻城狮

最新推荐文章于 2025-06-05 12:50:38 发布

阅读量940

点赞数

分类专栏： JQuery 文章标签： html 编辑器 jQuery框架

JQuery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript动态生成日期选择器的方法。该选择器包括年、月、日三个下拉列表，其中年份范围从1945年至2016年，并能根据所选年份和月份自动更新天数选项以反映正确的天数，包括考虑是否为闰年。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码：

<form name="form1" id="dateForm">
    <select name="year"></select>年
    <select name="month"></select>月
    <select name="day"></select>日
</form>

JS代码：

$(function(){
   var i=1945;
    var date=new Date();
    var year=date.getFullYear();//获取当前年份
    var dropList;
    for(var i;i<2017;i++){
        if(i==year){
            dropList=dropList+"<option value='"+i+"'  selected>"+i+"</option>";
        }else {
            dropList=dropList+"<option value='"+i+"'>"+i+"</option>";
        }
    }
    $('#dateForm select[name=year]').html(dropList);//生成年份下拉列表
    var monthly;
    for(var j=1;j<13;j++){
        monthly=monthly+'<option value="'+j+'">'+j+'</option>'
    }
    $('#dateForm select[name=month]').html(monthly);//生成月份下拉列表
    var daily;
    for(var day=1;day<=31;day++){
        daily=daily+'<option value="'+day+'">'+day+'</option>';
    }
    $('#dateForm select[name=day]').html(daily);
    $('#dateForm select[name=month]').change(function(){
        var currentDay;
        var total;
        var flag=$('#dateForm select[name=year]:selected').val();
        var currentMonth=$('#dateForm select[name=month]').val();
        switch (currentMonth){
            case "1":
            case "3":
            case "5":
            case "7":
            case "8":
            case "10":
            case "12":total=31;break;
            case "4":
            case "6":
            case "9":
            case "11":total=30;break;
            case "2":
                //闰年  整除4但是不整除100  或者整除400
                if( (flag%4==0 && flag%100!=0 ) || flag%400){
                    total=29;
                }else {
                    total=28;
                }
            default :break
        }
        for(day=1;day<=total;day++){
            currentDay=currentDay+'<option value="'+day+'">'+day+'</option>'
        }
        $('#dateForm select[name=day]').html(currentDay);//生成日期下拉列表
    });
});