如何停止复制下拉列表的日期?我用了一个while循环

我的作业是这样的：

我们必须使用 JavaScript HTML 创建一个简单的下拉列表。下拉列表是年，月和日期 - 一个简单的日历。我们唯一要做的就是将日期更改为 29 如果 29 月在闰年。我的问题是，每次我更改年份和月份时，日期下拉列表都会将循环相加，就像它复制据称只有 1-31 天的日期一样;变成 1-31，再加起来是 1 - 30。

我试图更改代码。但是，如果有任何简单的方法可以更改代码或添加一些东西以使日期"不复制不是该月的日期"。

function load() {
  var num = 1900;
  while (num <= 2019) {
    document.getElementById('s').innerHTML += "<option>" + num + "</option>";
    num++;
  }
}
//I add a function
function adonis() {
  var month = document.getElementById("mon").value;
  var year = document.getElementById("s").value;
  var x = 1;
  if (year % 4 == 0 && month == "February") {
    while (x <= 29) {
      document.getElementById("day").innerHTML += "<option>" + x + "</option>";
      x++;
    }
  } else if (month == "January" || month == "March" || month == "May" || month == "July" || month == "August" || month == "October" || month == "December" && year == 0) {
    while (x <= 31) {
      document.getElementById("day").innerHTML += "<option>" + x + "</option>";
      x++;
    }
  } else if (month == "April" || month == "June" || month == "September" || month == "November" && year == 0) {
    while (x <= 30) {
      document.getElementById("day").innerHTML += "<option>" + x + "</option>";
      x++;
    }
  } else if (month == "February" && year % 4 == !0) {
    while (x <= 28) {
      document.getElementById("day").innerHTML += "<option>" + x + "</option>";
      x++;
    }
  }
}

<body onload="load()">
  <select id="s" onchange="adonis()">
  </select>
  <select id="mon" onchange="adonis()">
    <option>January</option>
    <option>February</option>
    <option>March</option>
    <option>April</option>
    <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>August</option>
    <option>September</option>
    <option>October</option>
    <option>November</option>
    <option>December</option>
    //This is the date drop down list. It seems that it copies the dates once I change the year and month.
  </select>
  <select id="day" onchange="abela()">
  </select>
</body>

我希望日期的输出为 1、2、3 ...31. 不像 1 - 31 和另一个 1 - 31。这是我真的不知道要解决的事情

代码中的主要问题是你只使用：

.innerHTML +=

您不会重置内容。将以下内容添加到函数的开头：

.innerHTML = '';

可以使用 Date 对象和数组函数来简化此问题。

查看以下内容以生成选项 HTML。

//month is zero based index (Jan = 0)
function getDateOptions(year, month) {
  //Create an array with all dates
  var dates = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];
  //use the date function to get the last day of the month
  var lastDate = new Date(year, month + 1, 0).getDate();
  //reduce the array to just the valid dates
  dates = dates.splice(0, lastDate);
  //use the join function to generate the html
  return '<option>' + dates.join('</option><option>') + '</option>';
}
//Run for Feb
getDateOptions(2019, 1)

您的尝试几乎是正确的，只需稍作更改。在向列表添加新值之前，您需要清除列表

function load() {
  var num = 1900;
  while (num <= 2019) {
    document.getElementById('s').innerHTML += "<option>" + num + "</option>";
    num++;
  }
}
//I add a function
function adonis() {
  var month = document.getElementById("mon").value;
  var year = document.getElementById("s").value;
  var x = 1;
  document.getElementById("day").innerHTML = '';
  if (year % 4 == 0 && month == "February") {
    while (x <= 29) {
      document.getElementById("day").innerHTML += "<option>" + x + "</option>";
      x++;
    }
  } else if (month == "January" || month == "March" || month == "May" || month == "July" || month == "August" || month == "October" || month == "December" && year == 0) {
    while (x <= 31) {
      document.getElementById("day").innerHTML += "<option>" + x + "</option>";
      x++;
    }
  } else if (month == "April" || month == "June" || month == "September" || month == "November" && year == 0) {
    while (x <= 30) {
      document.getElementById("day").innerHTML += "<option>" + x + "</option>";
      x++;
    }
  } else if (month == "February" && year % 4 == !0) {
    while (x <= 28) {
      document.getElementById("day").innerHTML += "<option>" + x + "</option>";
      x++;
    }
  }
}

<body onload="load()">
  <select id="s" onchange="adonis()">
  </select>
  <select id="mon" onchange="adonis()">
    <option>January</option>
    <option>February</option>
    <option>March</option>
    <option>April</option>
    <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>August</option>
    <option>September</option>
    <option>October</option>
    <option>November</option>
    <option>December</option>
    //This is the date drop down list. It seems that it copies the dates once I change the year and month.
  </select>
  <select id="day" onchange="abela()">
  </select>
</body>

作为替代方法，您可以尝试以下方法：

有一个技巧，您可以使用日期计算器跳转到前一天(将日期传递为 0(。如果你这样做，你就有一个月的最后一天。使用此日期并循环访问它以创建选项。

此外，在循环中覆盖/更新是一个坏主意。相反，请创建一个 html 字符串并追加它以执行批量操作。

function load() {
  var num = 1900;
  while (num <= 2019) {
    document.getElementById('s').innerHTML += "<option>" + num + "</option>";
    num++;
  }
}
function adonis() {
  var month = document.getElementById("mon").value;
  var year = document.getElementById("s").value;
  var noOfDays = new Date(year, month, 0).getDate();
  var options = '';
  for (var i = 1; i <= noOfDays; i++) {
    options += '<option value="' + i + '">' + i + '</option>';
  }
  document.getElementById("day").innerHTML = options;
}

<body onload="load()">
  <select id="s" onchange="adonis()">
  </select>
  <select id="mon" onchange="adonis()">
    <option value='1'>January</option>
    <option value='2'>February</option>
    <option value='3'>March</option>
    <option value='4'>April</option>
    <option value='5'>May</option>
    <option value='6'>June</option>
    <option value='7'>July</option>
    <option value='8'>August</option>
    <option value='9'>September</option>
    <option value='10'>October</option>
    <option value='11'>November</option>
    <option value='12'>December</option>
    //This is the date drop down list. It seems that it copies the dates once I change the year and month.
  </select>
  <select id="day" onchange="abela()">
  </select>
</body>

相关内容

最新更新

热门标签：