Javascript 下拉函数

Javascript Drop Down Function

本文关键字：函数 Javascript      更新时间：2023-09-26

>我正在尝试创建一个下拉日历。 没有jquery！ 纯JavaScript。 到目前为止，@rlemon给了我很大的帮助，我已经能够构建他帮助我的代码。 我快完成了，但遇到了一些小问题。 到目前为止，一切正常，但现在我正在合并闰年，这是我遇到问题的地方。 我在确定所选的当前年份时遇到问题。 我有 

sel_year.onchange = recalculateDays2(this);

我相信它正在传递所选当前年份的值。 然后在函数 recalculateDays2 中，我正在创建一个变量 

year_index = x.text;

应该是 year_index = 2011、2012 等。 我希望函数 recalculateDays2 在用户更改为 2012 年时将 2 月 29 日设置为 2012。 请帮忙...

<html>
<head>
</head>
<body>
Calendar<br>
<hr align="left" width="200px"/>
--Year ------ Month ----- Day<br>
<div id="calendar-container"></div>
<script type="text/javascript">
(function() {
    var yr1 = 2011, yr2 = 2012, yr3 = 2013, yr4 = 2014;
    var years = [yr1, yr2, yr3, yr4];
    var calendar = [
        ["January", 31],["February", 28],["March", 31],["April", 30],["May", 31],["June", 30],["July", 31],["August", 31],["September", 30],["October", 31],["November", 30],["December", 31]],
        //this is the variable that accesses the content
        cont = document.getElementById('calendar-container');
    //creates the variables for the drop downs
    var sel_year = document.createElement('select'), sel_month = document.createElement('select'), sel_day = document.createElement('select');
    function createOption(txt, val) {
        //this creates the option but it seems that it is making the value -1 than what the text node is
        var option = document.createElement('option');
        option.value = val;
        option.appendChild(document.createTextNode(txt));
        return option;
    }
    function createYearOption(val) {
        var option = document.createElement('option');
        option.value = val;
        option.appendChild(document.createTextNode(val));
        return option;
    }
    //this clears any elements for days, months, years
    function clearChildren(ele) {
        while (ele.hasChildNodes()) {
            ele.removeChild(ele.lastChild);
        }
    }
    //this function is only triggered when you recalculate the months
    function recalculateDays() {
        var month_index = sel_month.value,
            df = document.createDocumentFragment();
        //l is the variable for the number of days in the month from the array above ex:28, 30, 31
        for (var i = 0, l = calendar[month_index][1]; i < l; i++) {
            //the first variable is what number will be displayed in the day drop down
            df.appendChild(createOption(i + 1, i));
        }
        clearChildren(sel_day);
        sel_day.appendChild(df);
    }
    //this function is triggered only when you change the year
    function recalculateDays2(x) {
        var month_index = sel_month.value,
            df = document.createDocumentFragment(), 
            year_index = x.text;
        //this checks to see if the month selected is Feb   
        if ((month_index == 1) && (year_index == 2012)) {
        //l is the variable for the number of days in the month from the array above ex:28, 30, 31
        for (var i = 0, l = calendar[month_index][1]; i < l + 1; i++) {
            //the first variable is what number will be displayed in the day drop down
            df.appendChild(createOption(i + 1, i));
        }
        clearChildren(sel_day);
        sel_day.appendChild(df);
    } else {}}  
    function generateMonths() {
        var df = document.createDocumentFragment();
        calendar.forEach(function(info, i) {
            df.appendChild(createOption(info[0], i));
        });
        //clears past months
        clearChildren(sel_month);
        //appends new months onto variable df
        sel_month.appendChild(df);
    }
    function generateYears() {
        var df = document.createDocumentFragment();
        years.forEach(function(i) {
            df.appendChild(createYearOption(i));
        });
        //clears past months
        clearChildren(sel_year);
        //appends new months onto variable df
        sel_year.appendChild(df);
    }
    //anytime the month selector is changed this calls the function to change the days
    sel_month.onchange = recalculateDays;
    sel_year.onchange = recalculateDays2(this);
    //i believe this automatically runs the months and days functions specifically for when first loading the page
    generateMonths();
    recalculateDays();
    generateYears();
    //this is what displays each of the individual drop downs after everything has been done to them
    cont.appendChild(sel_year);
    cont.appendChild(sel_month);
    cont.appendChild(sel_day);
}());
</script>
</body>
</html>

检查一年是否是闰年的一种简单方法是将其原型化到您的代码中：

Date.prototype.isLeapYear = function() {
    return (new Date(this.getFullYear(),1,29).getMonth() == 1);
};

然后，您可以使用 2 月份的正确天数更新阵列。

相关文章：