Javascript 在两个不同的选择/选项中迭代月份和天数

基本上，我试图让一个select元素迭代一年中的12个月，并根据显示的月份，让另一个select元素显示该月的天数。 i、 e.如果在第一个选择元素中选择了一月，则第二个选择元素将显示第1到30天。如果选择了“十一月”，则第二个选择元素将显示第1天到第31天，依此类推

HTML:

JavaScript:

for(var index in month) {
    month.options[month.options.length] = new Option(month[index], index);
}

if (month.val() === months[3] || months[5] || months[8] || months[10]){
    var numOfDays = 30;

    for(var i = 1; i <= numOfDays; i++) {
        for(i in day) {
            day.options[day.options.length] = new Option(day[i], i);
        }
    }
}
else if (month.val() === months[0] || months[2] || months[4] ||  months[6] || months[7] || months[9] || months[11]) {
    var numOfDays = 31;

    for(var i = 1; i <= numOfDays; i++) {
        for(i in day) {
            day.options[day.options.length] = new Option(day[i], i);
        }
    }
}
else {
    var numOfDays = 28;

    for(var i = 1; i <= numOfDays; i++) {
        for(i in day) {
            day.options[day.options.length] = new Option(day[i], i);
        }
    }
}

for（月风险值指数）{
month.options[month.options.length]=新选项（month[index]，index）；
}
if（month.val（）==月[3]| |月[5]| |月[8]| |月[10]）{
var numOfDays=30；
对于（var i=1；i首先，您的javascript代码缺少任何事件侦听器。这意味着您的javascript只执行了一次，之后就变成了死代码。当选中其中一个复选框时，系统无法自动猜测您希望运行某些代码。您必须指定它。尝试以onlo方式运行代码ad状态，可能会导致错误

因此，第1步是将日期选择框的更新功能包装在它自己的函数中。我们将其称为
function updateDays（）
这应该添加在第一个if语句之前。记住括号

第2步是修复月份选择框的填充。月份永远不会改变，因此我只需将它们硬编码到HTML中，但为了不改变您的代码，您需要执行以下操作：


让我们看一下（月var指数）的
首先。我猜您希望遍历月份名称数组，并将它们作为选项添加到选择框中。在这里，您似乎将
月份
与
月份
混淆了。替换变量名称，在下拉列表中为您提供12个选项，但它们迄今为止没有内容。但是它们确实有价值从0到11的es，这似乎与查找天数时的预期值相匹配
再次，您似乎将
month
与
months
混淆。更改变量名称后，现在可以成功填充月份选择：

错误行：

month.options[month.options.length] = new Option(month[index], index);

正确的行：

month.options[month.options.length] = new Option(months[index], index);

第3步是让系统知道，每当月份选择发生更改时，都要更新天选择框。为此，我们必须添加一个侦听器函数，在本例中是一个更改侦听器：

month.addEventListener('change', updateDays);

当然，我们希望updateDays在开始时也运行一次，当下拉列表设置为一月时，因此我们在这里也将其称为一次：

updateDays();

第4步是修复updateDays（）-函数。它有几点需要改进，但我将首先讨论您犯的明显错误：

if (month.val() === months[3] || months[5] || months[8] || months[10]){

首先，我不认为您可以通过调用month.val（）来检索该值。其次，当您使用
或
运算符
|
时，您应该知道javascript不是以这种方式工作的。要实现您想要的，您必须在每个OR运算符之间使用相等运算符的两侧。示例：

value === check1 || check2 || check3 || check4 //wrong
value === check1 || value === check2 || value === check3 //correct

您的代码只需检查一次值是否为“APRIL”。如果不是，则只检查“JUNE”是否为真。Javascript的设计使得在检查这样的字符串时，如果它存在，则返回true。换句话说，您当前的功能将始终返回30，因为字符串“JUNE”将始终存在

第5步是修复填充day下拉列表的函数。我必须承认，我不太明白您在那里试图做什么，所以我重写了整个过程。最后，您的javascript代码可能是这样的：

var months = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
var month = document.getElementById('month');
var day = document.getElementById('day');

for (var index in months) {
  month.options[month.options.length] = new Option(months[index], index);
}

month.addEventListener('change', updateDays);

updateDays();

function updateDays() {
  var month = document.getElementById('month');
  var value = month.options[month.selectedIndex].text;
  if (value === months[3] || value === months[5] || value === months[8] || value === months[10]) {
    var numOfDays = 30;
  } else if (value === months[0] || value === months[2] || value === months[4] || value === months[6] || value === months[7] || value === months[9] || value === months[11]) {
    var numOfDays = 31;
  } else {
    var numOfDays = 28;
  }

  for (var i = 1; i <= numOfDays; i++) {
    day.options[day.options.length] = new Option(i, i);
  }
}

var月=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]；
var month=document.getElementById（'month'）；
var day=document.getElementById（'day'）；
对于（月内的var指数）{
month.options[month.options.length]=新选项（month[index]，index）；
}
月。addEventListener（'change'，updateDays）；
updateDays（）；
函数updateDays（）{
var month=document.getElementById（'month'）；
var value=month.options[month.selectedIndex].text；
如果（值===月[3]| |值===月[5]| |值===月[8]| |值===月[10]）{
var numOfDays=30；
}如果（值===月[0]| |值===月[2]| |值===月[4]| |值===月[6]| |值===月[7]| |值===月[9]| |值===月[11]）{
var numOfDays=31；
}否则{
var numOfDays=28；
}
对于（VarI=1；i）它的价值，我通过比较索引简化了它

（为现代浏览器编写）

我已经把所有的代码都放进去了，如果让人困惑的话，我会去掉不适用的代码。
只是觉得它可能有用

// Populate the Date Search Select Inputs
const getWeek = () => {
  let now = new Date(), yearBegin = new Date(now.getFullYear(), 0)
  return Math.ceil((((now.setHours(0,0,0,0) - yearBegin) / 86400000)-1)/7)
}

const dayfield = document.getElementById('searchDay')
const weekfield = document.getElementById('searchWeek')
const monthfield = document.getElementById('searchMonth')
const yearfield = document.getElementById('searchYear')
const today = new Date()
const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

let numOfDays = 0
const updateDays = (value) => {
  if ([3,5,8,10].includes(value)) numOfDays = 30
  else if ([0,2,4,6,7,9,11].includes(value)) numOfDays = 31 
  else numOfDays = 28
};updateDays(months[today.getMonth()])

monthfield.addEventListener('change', () => {
  updateDays(monthfield.selectedIndex) // Update days compares the Months array index, with the select index.
  while (dayfield.options.length > 0) dayfield.remove(0)
  for ( let d = 1; d <= numOfDays; d++ ) dayfield.appendChild(new Option(d, d))
  dayfield.value = today.getDate()
})
dateBoxesPopulate = () => {
  
  for ( let y = 2000; y <= 2050; y++ ) yearfield.appendChild(new Option(y, y))
  yearfield.value = today.getFullYear()

  for ( let m = 0; m < 12; m++ ) monthfield.appendChild(new Option(months[m], months[m]))
  monthfield.value = months[today.getMonth()]

  for ( let w = 0; w <= 53; w++ ) weekfield.appendChild(new Option(w, w)) // Week One Starts On The First Sunday.
  weekfield.value = getWeek()

  for ( let d = 1; d <= numOfDays; d++ ) dayfield.appendChild(new Option(d, d))
  dayfield.value = today.getDate()
}


//填充日期搜索选择输入
const getWeek=（）=>{
让now=new Date（），yearBegin=new Date（now.getFullYear（），0）
返回Math.ceil（（（现在的setHours（0,0,0,0）-yearBegin）/86400000）-1）/7）
}
const dayfield=document.getElementById（'searchDay'）
const weekfield=document.getElementById（'searchWeek'）
const monthfield=document.getElementById（'searchMonth'）
const yearfield=document.getElementById（'searchYear'）
const today=新日期（）
恒月=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月]；
设numOfDays=0
const updateDays=（值）=>{
如果（[3,5,8,10]。包括（值））numOfDays=30
else if（[0,2,4,6,7,9,11]）包括（值））numOfDays=31
否则numOfDays=28
}；updateDays（月[today.getMonth（）]）
monthfield.addEventListener（'change'，（）=>{
updateDays（monthfield.selectedIndex）//updateDays将月份数组索引与select索引进行比较。
而（dayfield.options.length>0）dayfield.remove（0）
对于（设d=1；d{
首先，你没有问任何问题。你已经描述了一个要求。它更容易阅读
var months = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
var month = document.getElementById('month');
var day = document.getElementById('day');

for (var index in months) {
  month.options[month.options.length] = new Option(months[index], index);
}

month.addEventListener('change', updateDays);

updateDays();

function updateDays() {
  var month = document.getElementById('month');
  var value = month.options[month.selectedIndex].text;
  if (value === months[3] || value === months[5] || value === months[8] || value === months[10]) {
    var numOfDays = 30;
  } else if (value === months[0] || value === months[2] || value === months[4] || value === months[6] || value === months[7] || value === months[9] || value === months[11]) {
    var numOfDays = 31;
  } else {
    var numOfDays = 28;
  }

  for (var i = 1; i <= numOfDays; i++) {
    day.options[day.options.length] = new Option(i, i);
  }
}

// Populate the Date Search Select Inputs
const getWeek = () => {
  let now = new Date(), yearBegin = new Date(now.getFullYear(), 0)
  return Math.ceil((((now.setHours(0,0,0,0) - yearBegin) / 86400000)-1)/7)
}

const dayfield = document.getElementById('searchDay')
const weekfield = document.getElementById('searchWeek')
const monthfield = document.getElementById('searchMonth')
const yearfield = document.getElementById('searchYear')
const today = new Date()
const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

let numOfDays = 0
const updateDays = (value) => {
  if ([3,5,8,10].includes(value)) numOfDays = 30
  else if ([0,2,4,6,7,9,11].includes(value)) numOfDays = 31 
  else numOfDays = 28
};updateDays(months[today.getMonth()])

monthfield.addEventListener('change', () => {
  updateDays(monthfield.selectedIndex) // Update days compares the Months array index, with the select index.
  while (dayfield.options.length > 0) dayfield.remove(0)
  for ( let d = 1; d <= numOfDays; d++ ) dayfield.appendChild(new Option(d, d))
  dayfield.value = today.getDate()
})
dateBoxesPopulate = () => {
  
  for ( let y = 2000; y <= 2050; y++ ) yearfield.appendChild(new Option(y, y))
  yearfield.value = today.getFullYear()

  for ( let m = 0; m < 12; m++ ) monthfield.appendChild(new Option(months[m], months[m]))
  monthfield.value = months[today.getMonth()]

  for ( let w = 0; w <= 53; w++ ) weekfield.appendChild(new Option(w, w)) // Week One Starts On The First Sunday.
  weekfield.value = getWeek()

  for ( let d = 1; d <= numOfDays; d++ ) dayfield.appendChild(new Option(d, d))
  dayfield.value = today.getDate()
}