JavaScript:更新<选择>给定月份输入的天数列表

JavaScript: Updating <select> list of days given month input

本文关键字：输入 列表 数列 更新 选择 JavaScript      更新时间：2023-09-26

我的原始HTML有三个并排<select>输入，如下所示：

<select id="smonth" name="smonth" onchange="updateSDaysInput()">
      <option value="Month">Month</option>
      <option value="1" <?php if ($smonth == '1') { echo 'selected'; } ?>>January</option>
      <option value="2" <?php if ($smonth == '2') { echo 'selected'; } ?>>February</option>
      <option value="3" <?php if ($smonth == '3') { echo 'selected'; } ?>>March</option>
      <option value="4" <?php if ($smonth == '4') { echo 'selected'; } ?>>April</option>
      <option value="5" <?php if ($smonth == '5') { echo 'selected'; } ?>>May</option>
      <option value="6" <?php if ($smonth == '6') { echo 'selected'; } ?>>June</option>
      <option value="7" <?php if ($smonth == '7') { echo 'selected'; } ?>>July</option>
      <option value="8" <?php if ($smonth == '8') { echo 'selected'; } ?>>August</option>
      <option value="9" <?php if ($smonth == '9') { echo 'selected'; } ?>>September</option>
      <option value="10" <?php if ($smonth == '10') { echo 'selected'; } ?>>October</option>
      <option value="11" <?php if ($smonth == '11') { echo 'selected'; } ?>>November</option>
      <option value="12" <?php if ($smonth == '12') { echo 'selected'; } ?>>December</option>
</select>&nbsp;
<select id="sday" name="sday">
      <option value="Day">Day</option>
</select>&nbsp;
<select id="syear" name="syear" onchange="updateSDaysInput()">
      <option value="Year">Year</option>
      <option value="1998" <?php if ($syear == '1998') { echo 'selected'; } ?>>1998</option>
      <option value="1999" <?php if ($syear == '1999') { echo 'selected'; } ?>>1999</option>
      <option value="2000" <?php if ($syear == '2000') { echo 'selected'; } ?>>2000</option>
      <option value="2001" <?php if ($syear == '2001') { echo 'selected'; } ?>>2001</option>
      <option value="2002" <?php if ($syear == '2002') { echo 'selected'; } ?>>2002</option>
      <option value="2003" <?php if ($syear == '2003') { echo 'selected'; } ?>>2003</option>
      <option value="2004" <?php if ($syear == '2004') { echo 'selected'; } ?>>2004</option>
      <option value="2005" <?php if ($syear == '2005') { echo 'selected'; } ?>>2005</option>
      <option value="2006" <?php if ($syear == '2006') { echo 'selected'; } ?>>2006</option>
      <option value="2007" <?php if ($syear == '2007') { echo 'selected'; } ?>>2007</option>
      <option value="2008" <?php if ($syear == '2008') { echo 'selected'; } ?>>2008</option>
      <option value="2009" <?php if ($syear == '2009') { echo 'selected'; } ?>>2009</option>
      <option value="2010" <?php if ($syear == '2010') { echo 'selected'; } ?>>2010</option>
      <option value="2011" <?php if ($syear == '2011') { echo 'selected'; } ?>>2011</option>
      <option value="2012" <?php if ($syear == '2012') { echo 'selected'; } ?>>2012</option>
      <option value="2013" <?php if ($syear == '2013') { echo 'selected'; } ?>>2013</option>
      <option value="2014" <?php if ($syear == '2014') { echo 'selected'; } ?>>2014</option>
      <option value="2015" <?php if ($syear == '2015') { echo 'selected'; } ?>>2015</option>
</select>


这是相关的 JavaScript 代码：

syear = document.getElementById("syear");
smonth = document.getElementById("smonth");
sday = document.getElementById("sday");
function updateSDaysInput() {
   "use strict";
   var monthDays = findSMonthDays(smonth.value), newOption = document.createElement("option"), curLength = sday.length;
    if (curLength > monthDays) {
        for (i = curLength; i > monthDays; i = i - 1) {
            sday.remove(i);
        }
    }
    if (curLength < monthDays) {
        for (i = curLength; i < monthDays; i = i + 1) {
            newOption.text = i;
            newOption.value = i.toString();
            sday.add(newOption);
        }
    }
}

该代码应该在给定 smonth 的值的情况下根据需要添加或删除sday选项。但相反，它只是在sday底部添加一个选项。有谁知道可能是什么问题？

将 for 循环内的newOption = document.createElement("option")移动到每个循环迭代中，如下所示

if (curLength < monthDays) { for (i = curLength; i < monthDays; i = i + 1) { newOption = document.createElement("option"); newOption.text = i; newOption.value = i.toString(); sday.add(newOption); } }

希望对您有所帮助。

相关文章：