使用本月的月份在javascript中创建下拉列表

问题描述:

我有一个“按月搜索”功能,并在下拉(选择)字段中列出了几个月。我希望仅在本月之前(包括本月)显示5年的月份。这是我到目前为止有:使用本月的月份在javascript中创建下拉列表

var multiYears = [ "2015", "2016", "2017", "2018", "2019", "2020"]; 
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; 
var htmlOptions = ""; 
var i; 
for (m = 0; m < multiYears.length; m++) { 
    var multiYear = multiYears[m]; 
    for (i = 0; i < 12; i++) { 
     var realMonth = i + 1;   
     htmlOptions += '<option value="' + ("0" + realMonth).slice(-2) + "-" + multiYear + '">' + monthNames[i] + " " + multiYear + '</option>'; 
    } 
} 

var htmlStart = '<select size="1" id="multiDrop" name="multiDrop">'; 
var htmlOptionsHeader = '<option value="_">Navigate by month</option>'; 
var htmlEnd ='</select>'; 
var html = htmlStart + htmlOptionsHeader + htmlOptions + htmlEnd; 

林添加此HTML我使用JavaScript页面,然后根据年份和月份,在这样的选择选项的值装入结果:01-2015,02- 2015年03月15日等,其中1月份是01(而不是0)

+0

这是按预期工作。几个月加载为01 - 12什么是错的? – joyBlanks

+0

它需要从当前日历月开始......可能会使这更加可用的是在那里没有“硬编码”日期,因此列表总是从当前月份和年份开始 - 无论一年在...我不想在5年内修改此代码以添加2021并进一步。 – Innate

查看我的演示here。它显示今年9月份以及随后几年的所有月份。

var multiYears = [ "2015", "2016", "2017", "2018", "2019", "2020"]; 
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; 
var htmlOptions = ""; 
var i; 


var currentDate = new Date(); 

for (m = 0; m < multiYears.length; m++) { 
    var multiYear = multiYears[m]; 
    var startMonth = 1; 
    // if it's the current year, only show from this month onwards 
    if (multiYear == currentDate.getYear() + 1900) { 
     startMonth = currentDate.getMonth() + 1; 
    } 

    for (i = startMonth ; i <= 12; i++) { 
     htmlOptions += '<option value="' + ("0" + i).slice(-2) + "-" + multiYear + '">' + monthNames[i - 1] + " " + multiYear + '</option>'; 
    } 
} 

var htmlStart = '<select size="1" id="multiDrop" name="multiDrop">'; 
var htmlOptionsHeader = '<option value="_">Navigate by month</option>'; 
var htmlEnd ='</select>'; 
var html = htmlStart + htmlOptionsHeader + htmlOptions + htmlEnd; 

document.body.innerHTML += html; 
+0

查看我的评论以上关于当前年的joyBlanks。也许一个多年来动态创建年份的循环对于年份会更好。 – Innate

+0

在这里看到我的动态年数组:http://jsfiddle.net/InnateDev/435vqo83/ – Innate