我有三个 HTML 下拉列表来选择年、月和日期。如果所选年份等于当前年份,第二个和第三个列表仅显示截至当前日期的月份和日期。 我想用 JavaScript 编写这个代码。 这里我面临的问题是,当用户首先选择日期或月份时它将如何执行?
最佳答案
示例如下。如果首先选择月份和日期,除非所选值不再有效,否则它们不会更改。如果它们无效,它们将重置为 1。
HTML
<body>
<select name="month" id="month"></select>
<select name="day" id="day"></select>
<select name="year" id="year"></select>
</body>
JavaScript(带 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>
关于javascript - 验证 html 下拉列表中的日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30183198/