Question

所以我一直在研究这个问题。在我的html / php我有两个下拉列表，成为日期。当我发布POST时，我的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 } ?>

因此，我希望在从另一个月中选择某个月时禁用下拉菜单的某些天数。要做到这一点，我认为javascript将是最简单的方法。可用日期列在用户下拉列表的上方，因此我只是验证当天并在出错时使用警报。 js代码如下：

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
  }
}

用于运行onlcick函数的按钮与用于POST表单的按钮相同。我不知道这是否重要，但我现在因为我的javascript错误而丢失了。

Answer 1

这是一项有趣且常见的任务。作为程序员，您应该努力不创建需要过度嵌套或乘以代码库的控制结构。

您应该尝试组织代码的方式是使用DRY（不要重复自己）原则。这包括使用循环来完成其他冗长的任务和控制结构。否则，您将获得验证码if this or this or this or this or this or this or this... etc中所拥有的内容，而且该内容不可维护且相当难看。

为了给出一个更明确的例子，如果你要构建一个井字游戏，你是否会在胜利的每一个场景中刻苦地写下＆＃34; 如果左上角是x并且top-mid是x，右上角是x OR左上角是x mid-left是x，左下角是x OR，如果左上角是x，中间是x，右下角是x ...＆＃34; 对于团队和＃34; X＆＃34;和＆＃34; O＆＃34;或者你只是问浏览器＆＃34;是否有一排三个包含相同值的盒子？＆＃34;

这不是你立即理解的东西，但重要的是要意识到你必须对你的程序有所不同，但不要担心，因为如果你坚持我保证它会发生！

回答你的问题：

https://jsfiddle.net/ygpqqmL9/3/

//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;
    }
  }
})

选择的选项不可用时提醒用户

1 个答案: