Question

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

月份和年份字段都是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');
            }
        });
    });

我只是不确定这是否是正确的方法，如果是这样，如何正确编写循环。此外，我不知道我是否遗漏了一些东西才能使它发挥作用。

Answer 1

这就是我最终做的事情：

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

首先，我从索引1开始创建了一个包含所有月份名称的数组。（[1] =＆gt; 1月，[2] =＆gt; 2月，...）=＆gt; $个月

我还将当前的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");
    }
});

Answer 2

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

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

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

2 个答案: