【问题标题】:create a dropdown list in javascript using months from this month使用本月的月份在 javascript 中创建一个下拉列表
【发布时间】:2018-04-25 21:52:17
【问题描述】:

我有“按月搜索”功能,并在下拉(选择)字段中列出了月份。我希望只显示从本月开始的月份(包括本月)未来 5 年。这是我目前所拥有的:

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;

我使用 JavaScript 将此 HTML 添加到我的页面,然后根据月份和年份加载结果,选择选项中的值如下:01-2015、02-2015、03-2015 等,其中一月是 01 (而不是 0)

【问题讨论】:

  • 这按预期工作。月份加载为 01 - 12 怎么了?
  • 它需要从当前日历月开始......也许让这个更有用的是那里没有“硬编码”日期,所以列表总是从当前月份开始,并且年 - 无论是在哪一年......我不想在 5 年内修改此代码以添加 2021 年甚至更远。

标签: javascript html-select


【解决方案1】:

查看我的演示 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;

【讨论】:

  • 请参阅上面我对 joyBlanks 关于本年度的评论。也许 multiYears 循环动态创建年份对于年份部分会更好。
  • 用动态年份数组在这里查看我的小提琴:jsfiddle.net/InnateDev/435vqo83
猜你喜欢
  • 1970-01-01
  • 2021-10-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-05-24
  • 1970-01-01
  • 2020-08-25
  • 1970-01-01
相关资源
最近更新 更多