Question

我有三个HTML下拉列表来选择年，月和日期。如果所选年份等于当前年份，则第三个列表仅显示截至当前日期的月份和日期。我想用javascript编写代码。我面临的问题是，当用户首先选择日期或月份时，它将如何执行？

Answer 1

这是你想要的吗？试试这个网址希望这会对你有所帮助演示 - ＆gt;

https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/jsdemo/JSDatePicker.html

来源 - ＆gt; https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Examples.html

Answer 2

以下示例。如果首先选择月份和日期，除非所选值不再有效，否则它们不会更改。如果它们无效，它们将重置为1.

HTML

<body>
  <select name="month" id="month"></select>
  <select name="day" id="day"></select>
  <select name="year" id="year"></select>
</body>

JavaScript（w / JQuery）

<script type ="text/javascript" src="http://code.jQuery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
  var year = new Date().getFullYear();
  // load years
  for (var i=2000; i<=year; i++) $("#year").append('<option value=' + i + '>' + i + '</option>');
  // load months
  for (var i=1; i<=12; i++) $("#month").append('<option value=' + i + '>' + i + '</option>');
  // load days
  for (var i=1; i<=31; i++) $("#day").append('<option value=' + i + '>' + i + '</option>');
});

$(function() {
  $('#year').change(function() {
    var now = new Date();
    if ($('#year').val()==now.getFullYear()) {
      $('#month option').each(function() {
        if ($(this).val()>(now.getMonth()+1)) $(this).remove();
      });
    } else {
      for (var i=1; i<13; i++)
        if ($("#month option[value='" + i + "']").val()==undefined)
          $("#month").append('<option value=' + i + '>' + i + '</option>');
    }

    checkMonth();
  });

  $('#month').change(checkMonth);
});

function checkMonth() {
  var now = new Date();
  if ($('#year').val()==now.getFullYear() && $('#month').val()==(now.getMonth()+1)) {
    $('#day option').each(function() {
      if ($(this).val()>now.getDate()) $(this).remove();
    });
  } else {
    var days = 31;
    var month = $('#month').val();
    if (month==2) {
      if (($('#year').val() % 4) == 0) days = 29; // leap year
      else days = 28;
    } else if (month==2 || month==4 || month==6 || month==9 || month==11) {
      days = 30;
    }
    for (var i=1; i<32; i++)
      if (i>days)
        $("#day option[value='" + i + "']").remove();
      else if ($("#day option[value='" + i + "']").val()==undefined)
        $("#day").append('<option value=' + i + '>' + i + '</option>');
  }
}
</script>

在html下拉列表中验证日期

2 个答案: