Javascript 当所选选项不可用时提醒用户

所以我已经在这方面工作了一段时间了。在我的html/php中，有两个下拉列表成为日期。当我发布文章时，这在我的php中运行良好。但看起来是这样的：

<?php for($x=1; $x<=20; $x++){ ?>
              <div class="form-group">
                <label><?php echo "$x"; ?>.</label>
                <select class="form-control" name="month<?php echo $x ;?>">
                  <option selected disabled>- Month -</option>
                  <option value="06">June</option>
                  <option value="07">July</option>
                  <option value="08">August</option>
                </select>
                <select class="form-control" name="day<?php echo $x ;?>">
                  <option selected disabled>- Day -</option>
                  <option value="01">1</option>
                  <option value="02">2</option>
                  <option value="03">3</option>
                  <option value="04">4</option>
                  <option value="05">5</option>
                  <option value="06">6</option>
                  <option value="07">7</option>
                  <option value="08">8</option>
                  <option value="09">9</option>
                  <option value="10">10</option>
                  <option value="11">11</option>
                  <option value="12">12</option>
                  <option value="13">13</option>
                  <option value="14">14</option>
                  <option value="15">15</option>
                  <option value="16">16</option>
                  <option value="17">17</option>
                  <option value="18">18</option>
                  <option value="19">19</option>
                  <option value="20">20</option>
                  <option value="21">21</option>
                  <option value="22">22</option>
                  <option value="23">23</option>
                  <option value="24">24</option>
                  <option value="25">25</option>
                  <option value="26">26</option>
                  <option value="27">27</option>
                  <option value="28">28</option>
                  <option value="29">29</option>
                  <option value="30">30</option>
                  <option value="31">31</option>
                </select>
              </div> <?php } ?>

.
这是一项有趣而常见的任务。作为一名程序员，您应该努力避免创建需要过度嵌套或增加代码基的控制结构

您应该尝试使用DRY（不要重复）原则来组织代码。这包括使用循环来完成其他冗长的任务和控制结构。否则，如果此或此或此或此或此或此。。。etc

这是不可维护的，而且相当难看

为了给出一个更清楚的例子，如果你要建立一个tic-tac-toe游戏，你会在每一个获胜的场景中苦心经营地写下这样的话：“如果左上角是x，中上角是x，右上角是x，或者左上角是x，左下角是x，或者如果左上角是x，中上角是x，右下角是x…”分别为“X”和“O”，或者您只需问浏览器“是否有一行三个框都包含相同的值？”

这不是你马上就能理解的事情，但重要的是要意识到，你必须对你的程序有一点不同的想法，但不要担心，因为如果你坚持下去，我保证它会发生

回答你的问题：

---

今天早上我刚进来读了所有这些。谢谢你的提示。当我写我所做的事情时，我一直在想必须有一个更简单的方法。我很好奇为什么你用let而不是varthough@somebodystopme在本例中，除了for循环之外，如果您使用var而不是let，则无关紧要关键字let分配的变量范围小于var。使用let声明的任何内容仅在该代码块及其任何子代码块中可用（代码块通常以大括号开始和结束，例如if语句和函数）var将全局设置变量或将其设置为整个代码块，而不管它在其中声明在哪里。更多信息：好的，谢谢。我还有最后一个问题。我的html使用php循环了20次。因此，我的月和日名称属性编号为day1、day2、day3…与month相同。它创建了20个下拉列表。conti下一个注释中的nue为了在您的示例中获得正确的月份和名称，我将循环代码并将for循环变量连接到日期和月份，如下所示：

for（x=1；x）
function validate(){
  for(i=1;i<=20;i++){
    var month = document.getElementByName("month"+i);
    var day   = document.getElementByName("day"+i);

    if(month == "06"){//alert user if selecting a disabled date for june
      if(day == "01" || day == "02" || day == "03" || day == "04" || day == "05" || day == "06" || day == "07" || day == "08" || day == "09" || day == "10" || day == "11" || day == "17"){
        if(day == "18" || day =="24" || day == "25"){
          alert("Please choose a daily dropin date that corresponds to a date available during a session!");
        }
      }
    }//end if for june

    if(month == "07"){//alert user if selecting a disabled date for july
      if(day == "01" || day == "02" || day == "03" || day == "04" || day == "08" || day == "09" || day == "15" || day == "16" || day == "22" || day == "23" || day == "29" || day == "30"){
          alert("Please choose a daily dropin date that corresponds to a date available during a session!");
      }
    }//end if for july

    if(month == "08"){//alert user if selecting a disabled date for august
      if(day == "05" || day == "06" || day == "12" || day == "13" || day == "19" || day == "20" || day == "26" || day == "27"){
          alert("Please choose a daily dropin date that corresponds to a date available during a session!");
      }
    }//end if for august
  }
}

//create our data
data = {
  disabled_days: {
    "June": [3, 5, 7, 9],
    "July": [10, 20, 30],
    "August": [1, 2, 3, 4]
  }
}

//get the select month box
let select_month = document.querySelector('select[name="month"]');

//when a month is selected...
select_month.addEventListener('change', function(e) {

//get the name of the month
  let month = select_month[select_month.selectedIndex].textContent;

// get all the days in the day select box
// enable all of them
  let day_arr = [].slice.call(document.querySelectorAll('select[name="day"] option'))
  for (let day of day_arr) day.disabled = false;

// loop over all the days to be disabled
// find them in the data object based on the month name
// disable those days
 for (let disabled_day of data.disabled_days[month]) {
    for (let day of day_arr) {
      if (day.textContent == disabled_day) day.disabled = true;
    }
  }
})