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

Question

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

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

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

基本上，我在这里想要实现的是，确保客户无法选择过去的 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]=>一月，[2]=>二月，...) => $月

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