联动的日期下拉列表，兼容IE,FF-优快云博客

本文链接：https://blog.youkuaiyun.com/liuwei_blog/article/details/3222652

本文介绍了一个简单的JavaScript日期选择器实现方法，通过动态更新年、月、日的选择器选项来确保用户输入的有效性。该选择器能根据所选年份是否为闰年来调整2月的天数，并实时更新日期选择器的选项。

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

测试浏览器：IE7,FF3

JS代码

var dangQian = 31;
            function setDay(){
                var year = parseInt(document.getElementById('year').value); //当前年 
                var month = parseInt(document.getElementById('month').value); //当前月 
                var oDay = document.getElementById('day');
                var days = [31,28,31,30,31,30,31,31,30,31,30,31]; //一年中各月天数 
                if(year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)){ //闰年 
                    days[1] = 29; //闰年2月29天 
                }
                var day = days[month - 1]; //本月天数 
                while(dangQian > day){ //大于本月天数隐藏 
                    oDay.removeChild(document.getElementById('day' + dangQian));
                    dangQian--;
                }
                while(day > dangQian){ //小于等于本月天数显示 
                    dangQian++;
                    var option = new Option(dangQian,dangQian); //注意select动态添加option的方法 
                    option.id = 'day' + dangQian;
                    oDay.options[oDay.options.length] = option; //注意select动态添加option的方法 
                }
            }
            
            function addOnload(fn){
                if(typeof(fn) != 'function') return false;
                var _onload = (window.onload && typeof(window.onload) == 'function') ? window.onload : null;
                window.onload = function(){if(_onload)_onload();fn();};
            }
            addOnload(setDay);

jsp代码片段:

<select name="year" id="year" onchange="setDay()">
                                <%for(int i = 0,len = 10; i < len; i++){%>
                                    <option value="<%=y-i %>" <%if(y-i == year){out.print("selected");} %>><%=y-i %></option>
                                <%}%>
                                </select>
                                <select name="month" id="month" onchange="setDay()">
                                <%for(int i = 0,len = 12; i < len; i++){%>
                                    <option value="<%=(i+1)<10?"0"+(i+1):(i+1) %>" <%if(i+1 == month){out.print("selected");} %>><%=i+1 %></option>
                                <%}%>
                                </select>
                                <select name="day" id="day">
                                <%for(int i = 0,len = 31; i < len; i++){%>
                                    <option id="day<%=(i+1) %>" value="<%=(i+1)<10?"0"+(i+1):(i+1) %>" <%if(i+1 == day){out.print("selected");} %>><%=i+1 %></option>
                                <%}%>
                                </select>