Javascript 在选择框上重新填充日期

我在Rails中创建了一个日期选择框（有3个选择框：一个用于年，一个用于月，一个用于日）

---

把2月31日放在他们身上是相当令人困惑的。我希望能够让选择框只包含有效日期。我的意思是，当你选择2月31日，30日，（以及某些年份的29日）被删除，然后，当你选择1月时，它们又被添加，依此类推。此外，我希望初始选择框仅填充所选月份的天数。

我假设您有三个选择，类为

“天”、“月”、“年”

。 然后使用这个JS：

function monthChanged() {
    var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    var month = $('.month').val() - 1, year = +$('.year').val();
    var diff;

    // Check for leap year if Feb
    if (month == 1 && new Date(year, month, 29).getMonth() == 1) days[1]++;

    // Add/Remove options
    diff = $('.day option').length - (days[month] + 1);
    if (diff > 0) { // Remove
        $('.day option').slice(days[month] + 1).remove();
    } else if (diff < 0) { // Add
        for (var i = $('.day option').length; i <= days[month]; i++) {
            $('<option>').attr('value', i).text(i).appendTo('.day');
        }
    }
}

$(function () {
    monthChanged(); // On document ready
    $('.month').change(monthChanged); // On month change
    $('.year').change(monthChanged); // On year change (for leap years)
});

函数monthChanged（）{
风险值天数=[31,28,31,30,31,30,31,31,30,31,30,30,31]；
var month=$（'.month'）.val（）-1，year=+$（'.year'）.val（）；
var-diff；
//检查闰年，如果是二月
如果（月==1&&新日期（年、月、29）。getMonth（）==1）天[1]+；
//添加/删除选项
差异=$（“.day选项”）.length-（天[月]+1）；
如果（差异>0）{//删除
$（'.day选项'）.slice（天[月]+1.remove（）；
}else如果（diff<0）{//Add
对于（var i=$（'.day选项'）.length；i
/*自动根据月份更新天数*/
对于（var i=2014；i<2019；i++）{
$（''）.attr（'value'，i）.text（i）.appendTo（'start#u year'）；
}
函数monthChanged（）{
调试器；
风险值天数=[31,28,31,30,31,30,31,31,30,31,30,30,31]；
var month=$（'#start_month'）.val（）-1，
年份=+$（'开始年份'）.val（）；
//检查闰年，如果是二月
如果（月==1和新日期（年、月、29）。getMonth（）==1）
天数[1]++；
//添加/删除选项
如果（$（'#开始日选项'）。长度>天[月]）{
//除去
$（“#开始日选项”）.slice（天[月]+1.remove（）；
}else if（$（“#开始日选项”）。长度<天[月]+1）{
//加
对于（var i=$（“#start_day option”）.length+1；我在那里放了一点jquery。你能帮我用多个元素完成这项工作吗？谢谢：）@Rolpege，你需要一个div来包装每一组3个选择，并给这个div一个类，说“date”，然后使用
.closest（“date”）。查找（.month”）
，而不是直接选择
“.month”
。看看最近的
文档：这感觉像是一个常见的“问题”“我很惊讶没有一个jQuery插件。你有没有想过把它包装成一个插件并发布它？如果你真的这么做了，你可以使用这个技巧来减少一点大小，以获得一个月的天数：检查上面的代码以避免在下拉列表中重复日期。（日期2显示了两次）你真的应该提到，这是另一个答案的改进版本。
/* automatically update days based on month */

for (var i = 2014; i < 2019; i++) {
    $('<option>').attr('value', i).text(i).appendTo('#start_year');
}

function monthChanged() {
    debugger;
    var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    var month = $('#start_month').val() - 1,
        year = +$('#start_year').val();

    // Check for leap year if Feb
    if (month == 1 && new Date(year, month, 29).getMonth() == 1) 
        days[1]++;

    // Add/Remove options
    if ($('#start_day option').length > days[month]) {
        // Remove
        $('#start_day option').slice(days[month] + 1).remove();
    } else if ($('#start_day option').length < days[month] + 1) {
        // Add
        for (var i = $('#start_day option').length + 1; i <= days[month]; i++) {
            $('<option>').attr('value', i).text(i).appendTo('#start_day');
        }
    }
}


monthChanged(); // On document ready
$('#start_month').change(monthChanged); // On month change
$('#start_year').change(monthChanged); // On year change (for leap years)