jQuery实现select标签的生日选择器

关注

原创最新推荐文章于 2026-06-14 15:16:50 发布 3.8k 阅读 AI 写同款· GEO 优化 ›

jQuery select年月日(生日)选择器 实际项目中，在用户的个人中心，编辑用户资料时经常会遇到选择生日选项的问题。因为我项目工程中没有使用如jQuery UI的插件性下拉列表，所以选择select + option的原生方式，实现选择器。能够准确计算闰年的年月日，方便表单处理。实际效果如下图，式样略粗糙 HTML 生日中的年月日以下拉方式，我们给每个select加个rel的属性，当已知用户生日时，直接通过rel属阅读详情

HTML添加三个年月日selector:

<div class="birthday">
            <select name="year" id="year" onchange="getDays()"></select>
            <select name="month" id="month" onchange="getDays()"></select>
            <select name="day" id="day""></select>
</div>

onchange="getDays()"当select的值发生变化时执行getDays函数，通过这个方式获得当前year和month两个select的值，然后设置对应的day selector的options选项

js部分：

<script type="text/javascript">
            $(document).ready(function(){
                var date=new Date();//创建日期对象
                var year=date.getFullYear();//获取当前年份
                for(var i=year-100;i<=year;i++){//在id为year的selector附加option选项
                    $("#year").append("<option value=\""+i+"\">"+i+"</option>");//append函数附加html到元素结尾处
                }
                for(var i=1;i<=12;i++){
                    $("#month").append("<option value=\""+i+"\">"+i+"</option>");//为Id为month的selector附加option选项
                }
                getDays($("#month").val(),$("#year").val());执行函数getDays()，传参year和month，初始化day selector
            });
            function getDaysInMonth(month,year){//年月对应的日数算法
                var days;
                if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12) {
                days=31;//固定31
                }else if (month==4 || month==6 || month==9 || month==11){
                days=30;//固定30
                }else{
                if ((year%4 == 0 && year%100 != 0) || (year%400 == 0)) {     //排除百年，每四年一闰；每四百年一闰；
                days=29; //闰年29
                }else { 
                days=28; //平年28
                }
                }
                return days;//返回该年月的日数
            }
            function getDays(){
                var year = $("#year").val();//year selector onchange="getDays()"动态获取用户选择的year值
                var month = $("#month").val();//month selector onchange="getDays()"动态获取用户选择的month值
                var days = getDaysInMonth(month,year);//调用算法函数计算对应年月的日数
                $("#day").empty();//调用empty()函数清空day selector options，然后再append函数往day selector添加options
                for(var i=1;i<=days;i++){
                $("#day").append("<option value=\""+i+"\">"+i+"</option>");
                }
            }
</script>

收录于