如果选择了当前年份，则在Select元素中仅显示当前和未来月份

Show only current and future months in a Select element if current year was chosen

本文关键字：显示 元素 未来 则在 选择 如果 Select      更新时间：2023-09-26

我正在创建一个信用卡付款表单。作为表格的一部分，我还收集了客户卡的到期日详细信息。

月份和年份字段都是HTML中的Select元素类型。

使用jQuery或JavaScript，我想做的是，如果客户端从可用年份列表中选择当前年份，则之前的月份将从选项列表中删除，如果已经选择了过去的月份，则默认情况下，月份字段中的值应重置为选择的当前月份。如果他再次将年份值更改为未来年份，则应再次显示所有月份。

基本上，我在这里试图实现的是，确保客户不能为CC到期日选择过去的日期，而不是使用验证和显示警报，以防他选择。

编辑

好吧，我还没有尝试过任何东西，因为我对前端没有太多经验，但我想我必须使用这样的东西：

    $(document).ready(function () {
        $("#year").change(function () {
            var date = new Date();
            var currentmonth = date.getMonth();
            var currentyear = date.getFullYear();
            var year = $(this).val();
            if (year == currentyear) {
                $("#month").html('add a loop here to add options from currentMonth to 12');
            } else {
                $("#month").html('same as above but from 1 to 12');
            }
        });
    });

我只是不确定这是否是正确的方法，如果是，如何正确地编写循环。此外，我不知道我是否为了让它发挥作用而错过了什么。

这就是我最终所做的：

  • PHP（使用Laravel框架）、HTML和jQuery*

首先，我创建了一个从索引1开始的所有月份名称的数组。（[1]=>一月，[2]=>二月，…）=>$months

我还将current的int值保存为$currentMonth

HTML:

<select id="year" name="..." class="...">
    <option value="">Choose...</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
    <option value="2023">2023</option>
    <option value="2024">2024</option>
    <option value="2025">2025</option>
    <option value="2026">2026</option>
    <option value="2027">2027</option>
    <option value="2028">2028</option>
    <option value="2029">2029</option>
    <option value="2030">2030</option>
</select>

<select id="month" name="..." class="...">
    <option value="">Choose</option>
    <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>
</select>

jQuery:

$("#year").change(function () {
    var date = new Date();
    var currentyear = date.getFullYear();
    var year = $(this).val();
    if (year == currentyear) {
        $("#month").html("@for($i=(int)$currentMonth;$i<=12;$i++)<option value='{{$i}}'>$months[$i]</option>@endfor");
    } else {
        $("#month").html("@for($i=1;$i<=12;$i++)<option value='{{$i}}'>$months[$i]</option>@endfor");
    }
});

我不确定你遇到了什么问题，但这里有一个你可以做的例子：（未测试）

// get current date
var now = new Date();
var day = now.getDate(); // day of the month
var month = now.getMonth()+1; // this is normally 0-based, added 1 for 1-based months
var year = now.getFullYear(); // four digit year
// compare user date to current date
if(year === userYear){
  if(userMonth<=month){
    userMonth = month;
    if(userDay<day){
      userDay = day;
    }
  }
  for(var i=0;i<month;i++){ // remove all months before current month
    monthArray.remove(i);
  }
} else {
  // reset the array
  for(var i in monthArray){
    monthArray.remove(i); // remove all the elements
  }
  for(var i=1;i<13;i++){
    var option = document.createElement("option");
    option.text = i;
    x.add(option); // add all the months
  }
}
相关文章：