2015-05-12 31 views
1

我有三個HTML下拉列表來選擇年份,月份和日期。如果選定的年份等於當前年份,則第二個和第三個列表僅顯示直至當前日期的月份和日期。 我想用javascript編碼。 這裏我面臨的問題是,當用戶首先選擇日期或月份時,它將如何執行?在html下拉列表中驗證日期

+1

發佈您的代碼,有人可以幫你 –

+0

我認爲你必須限制日期範圍。如果你給出更好的解釋,那麼我可以幫忙。更好地做一個小提琴 – murli2308

+0

代碼說話不僅僅是單純的詞..貼上你的代碼 – jaggs

回答

0

例。如果首先選擇月份和日期,則除非所選值不再有效,否則它們不會更改。如果它們是無效的,他們將重置爲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>