HTML选择选项显示上去12个月

HTML selection option display on going 12 months

本文关键字：12个月显示选择选项 HTML 更新时间：2023-09-26

我想将当前月份和年份与未来12个月绑定到下拉列表。我使用下面的代码来绑定月份和年份。

function writeMonthOptions() {
            var myselect = document.getElementById("drp6"), year = new Date().getFullYear();
            var today = new Date();
            var optionValues;
            var gen = function (max) {
                do {
                    optionValues = months[today.getMonth() + max] + ' ' + year;
                    myselect.add(new Option(optionValues, optionValues), null);
                    max++;
                } while (max < 12);
            }(0);
        }

我的html代码:

    <select name="drp6" id="drp6"></select>

但是我得到了如下的选择选项:
2015年7月
2015年8月
2015年9月
2015年10月
2015年11月
2015年12月
未定义的2015
未定义的2015
未定义的2015
未定义的2015
未定义的2015

怎么解?由于

因为只有12个月，如果你试图在optionValues = months[today.getMonth() + max] + ' ' + year;中获得月[13]，那么它将是'未定义的'。

另外，year应该是一个相当大的部分，当你进入新的一年时，years的值应该是2016。

可以改成:

      
     //demo value.
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
   function writeMonthOptions() {
        var myselect = document.getElementById("drp6"), year = new Date().getFullYear();
        var today = new Date();
        var optionValues;
    
        var gen = function (max) {
            var curMonth = today.getMonth();
            var curYear = year;  // presevere outer year value if you hava other use
            do {
                optionValues = months[curMonth] + ' ' + curYear;
                myselect.add(new Option(optionValues, optionValues), null);
    
                ++curMonth;
    
                // When months reach the 13th ele of months, advance to next year.
                if (curMonth === months.length) {
                    ++curYear;
                    curMonth = 0;
                }
    
                max++;
            } while (max < 12);
        }(0);
    }
    
    // test.
    writeMonthOptions();

<select id="drp6"></select>

您只需将months索引更改为:(today.getMonth() + max) % today.getMonth()。

EDIT change year:

你还需要适应年份，这给了我们:optionValues = months[index % months.length] + ' ' + (year + Math.floor(index / months.length));

这就是你需要改变的。

window.onload = function() {
function writeMonthOptions() {
            var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
            var myselect = document.getElementById("drp6"), year = new Date().getFullYear();
            var today = new Date();
            var optionValues;
            var index;
    
            var gen = function (max) {
                do {
                    index = today.getMonth() + max;
                    optionValues = months[index % months.length] + ' ' + (year + Math.floor(index / months.length));
                    myselect.add(new Option(optionValues, optionValues), null);
                    max++;
                } while (max < 12);
            }(0);
        }
    writeMonthOptions();
};

<select name="drp6" id="drp6"></select>