0

我正在尝试创建一个虚拟 javascript 日历下拉菜单。我希望在选择一个月时显示正确的天数，但无论何时我选择某些内容，都不会显示任何天数。请帮忙。我不能再次使用 jquery，否则这次他们会解雇我。

<html>
<head>
<script type="text/javascript">
function show(x) {
var mon = document.getElementById(x).innerHTML;
//if month value is nothing display no days
if (mon == "") {
    document.getElementById("one").style.display="none";
    document.getElementById("two").style.display="none";
    document.getElementById("three").style.display="none";
    document.getElementById("four").style.display="none";
    document.getElementById("five").style.display="none";
    document.getElementById("six").style.display="none";
    document.getElementById("seven").style.display="none";
    document.getElementById("eight").style.display="none";
    document.getElementById("nine").style.display="none";
    document.getElementById("ten").style.display="none";
    document.getElementById("eleven").style.display="none";
    document.getElementById("twelve").style.display="none";
    document.getElementById("thirteen").style.display="none";
    document.getElementById("fourteen").style.display="none";
    document.getElementById("fifteen").style.display="none";
    document.getElementById("sixteen").style.display="none";
    document.getElementById("seventeen").style.display="none";
    document.getElementById("eighteen").style.display="none";
    document.getElementById("nineteen").style.display="none";
    document.getElementById("twenty").style.display="none";
    document.getElementById("twentyone").style.display="none";
    document.getElementById("twentytwo").style.display="none";
    document.getElementById("twentythree").style.display="none";
    document.getElementById("twentyfour").style.display="none";
    document.getElementById("twentyfive").style.display="none";
    document.getElementById("twentysix").style.display="none";
    document.getElementById("twentyseven").style.display="none";
    document.getElementById("twentyeight").style.display="none";
    document.getElementById("twentynine").style.display="none";
    document.getElementById("thirty").style.display="none";
    document.getElementById("thirtyone").style.display="none";
//if month value has 31 days then display all 31 days
} else if ((mon == "January") || (mon == "March") || (mon == "May") || (mon == "July") || (mon == "August") || (mon == "October") || (mon == "December")) {
    document.getElementById("one").style.display="";
    document.getElementById("two").style.display="";
    document.getElementById("three").style.display="";
    document.getElementById("four").style.display="";
    document.getElementById("five").style.display="";
    document.getElementById("six").style.display="";
    document.getElementById("seven").style.display="";
    document.getElementById("eight").style.display="";
    document.getElementById("nine").style.display="";
    document.getElementById("ten").style.display="";
    document.getElementById("eleven").style.display="";
    document.getElementById("twelve").style.display="";
    document.getElementById("thirteen").style.display="";
    document.getElementById("fourteen").style.display="";
    document.getElementById("fifteen").style.display="";
    document.getElementById("sixteen").style.display="";
    document.getElementById("seventeen").style.display="";
    document.getElementById("eighteen").style.display="";
    document.getElementById("nineteen").style.display="";
    document.getElementById("twenty").style.display="";
    document.getElementById("twentyone").style.display="";
    document.getElementById("twentytwo").style.display="";
    document.getElementById("twentythree").style.display="";
    document.getElementById("twentyfour").style.display="";
    document.getElementById("twentyfive").style.display="";
    document.getElementById("twentysix").style.display="";
    document.getElementById("twentyseven").style.display="";
    document.getElementById("twentyeight").style.display="";
    document.getElementById("twentynine").style.display="";
    document.getElementById("thirty").style.display="";
    document.getElementById("thirtyone").style.display="";
//if month value has 30 days then display 30 days
} else if ((mon == "April") || (mon == "June") || (mon == "September") || (mon == "November")) {
    document.getElementById("one").style.display="";
    document.getElementById("two").style.display="";
    document.getElementById("three").style.display="";
    document.getElementById("four").style.display="";
    document.getElementById("five").style.display="";
    document.getElementById("six").style.display="";
    document.getElementById("seven").style.display="";
    document.getElementById("eight").style.display="";
    document.getElementById("nine").style.display="";
    document.getElementById("ten").style.display="";
    document.getElementById("eleven").style.display="";
    document.getElementById("twelve").style.display="";
    document.getElementById("thirteen").style.display="";
    document.getElementById("fourteen").style.display="";
    document.getElementById("fifteen").style.display="";
    document.getElementById("sixteen").style.display="";
    document.getElementById("seventeen").style.display="";
    document.getElementById("eighteen").style.display="";
    document.getElementById("nineteen").style.display="";
    document.getElementById("twenty").style.display="";
    document.getElementById("twentyone").style.display="";
    document.getElementById("twentytwo").style.display="";
    document.getElementById("twentythree").style.display="";
    document.getElementById("twentyfour").style.display="";
    document.getElementById("twentyfive").style.display="";
    document.getElementById("twentysix").style.display="";
    document.getElementById("twentyseven").style.display="";
    document.getElementById("twentyeight").style.display="";
    document.getElementById("twentynine").style.display="";
    document.getElementById("thirty").style.display="";
    document.getElementById("thirtyone").style.display="none";

//case if month value is Feb
} else {
    document.getElementById("one").style.display="";
    document.getElementById("two").style.display="";
    document.getElementById("three").style.display="";
    document.getElementById("four").style.display="";
    document.getElementById("five").style.display="";
    document.getElementById("six").style.display="";
    document.getElementById("seven").style.display="";
    document.getElementById("eight").style.display="";
    document.getElementById("nine").style.display="";
    document.getElementById("ten").style.display="";
    document.getElementById("eleven").style.display="";
    document.getElementById("twelve").style.display="";
    document.getElementById("thirteen").style.display="";
    document.getElementById("fourteen").style.display="";
    document.getElementById("fifteen").style.display="";
    document.getElementById("sixteen").style.display="";
    document.getElementById("seventeen").style.display="";
    document.getElementById("eighteen").style.display="";
    document.getElementById("nineteen").style.display="";
    document.getElementById("twenty").style.display="";
    document.getElementById("twentyone").style.display="";
    document.getElementById("twentytwo").style.display="";
    document.getElementById("twentythree").style.display="";
    document.getElementById("twentyfour").style.display="";
    document.getElementById("twentyfive").style.display="";
    document.getElementById("twentysix").style.display="";
    document.getElementById("twentyseven").style.display="";
    document.getElementById("twentyeight").style.display="";
    document.getElementById("twentynine").style.display="none";
    document.getElementById("thirty").style.display="none";
    document.getElementById("thirtyone").style.display="none";
    //check to see if it was a leap year
    if (/*check if year is divisible by four and has a remainder of zero)*/ {
        //document.getElementById("twentynine").style.display="";
    } else {
    }
}
}
</script>

</head>

<body>
Calendar<br>
<hr align="left" width="200px"/>


--Year ------ Month ----- Day<br>

<select name="year">
<option value="defaulty"></option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>

<select name="month" onchange="show(this.value)">
<option id="defaultm" value="defaultm"></option>
<option id="January" value="January">January</option>
<option id="February" value="February">February</option>
<option id="March" value="March">March</option>
<option id="April" value="April">April</option>
<option id="May" value="May">May</option>
<option id="June" value="June">June</option>
<option id="July" value="July">July</option>
<option id="August" value="August">August</option>
<option id="September" value="September">September</option>
<option id="October" value="October">October</option>
<option id="November" value="November">November</option>
<option id="December" value="December">December</option>
</select>

<select name="day">
<option id="defaultd" value="defaultd"></option>
<option id="one" value="one" style="display:none">1</option>
<option id="two" value="two" style="display:none">2</option>
<option id="three" value="three" style="display:none">3</option>
<option id="four" value="four" style="display:none">4</option>
<option id="five" value="five" style="display:none">5</option>
<option id="six" value="six" style="display:none">6</option>
<option id="seven" value="seven" style="display:none">7</option>
<option id="eight" value="eight" style="display:none">8</option>
<option id="nine" value="nine" style="display:none">9</option>
<option id="ten" value="ten" style="display:none">10</option>
<option id="eleven" value="eleven" style="display:none">11</option>
<option id="twelve" value="twelve" style="display:none">12</option>
<option id="thirteen" value="thirteen" style="display:none">13</option>
<option id="fourteen" value="fourteen" style="display:none">14</option>
<option id="fifteen" value="fifteen" style="display:none">15</option>
<option id="sixteen" value="sixteen" style="display:none">16</option>
<option id="seventeen" value="seventeen" style="display:none">17</option>
<option id="eighteen" value="eighteen" style="display:none">18</option>
<option id="nineteen" value="nineteen" style="display:none">19</option>
<option id="twenty" value="twenty" style="display:none">20</option>
<option id="twentyone" value="twentyone" style="display:none">21</option>
<option id="twentytwo" value="twentytwo" style="display:none">22</option>
<option id="twentythree" value="twentythree" style="display:none">23</option>
<option id="twentyfour" value="twentyfour" style="display:none">24</option>
<option id="twentyfive" value="twentyfive" style="display:none">25</option>
<option id="twentysix" value="twentysix" style="display:none">26</option>
<option id="twentyseven" value="twentyseven" style="display:none">27</option>
<option id="twentyeight" value="twentyeight" style="display:none">28</option>
<option id="twentynine" value="twentynine" style="display:none">29</option>
<option id="thirty" value="thirty" style="display:none">30</option>
<option id="thirtyone" value="thirtyone" style="display:none">31</option>

</select>



</body>

</html>
4

1 回答 1

11

Well to add some actual content to this comment discussion: Here is your jQuery free PURE JS solution.

I chose to do it this way because 1) I hate writing HTML, and 2) to show you the power of learning Javascript properly.

There are some browser compatibility issues with my code (namely older IE versions) I will let you figure these out and handle them on your own.

html:

<div id="calendar-container"></div>

js:

(function() {
    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]
        ],
        cont = document.getElementById('calendar-container');

    var sel_year = document.createElement('select'),
        sel_month = document.createElement('select'),
        sel_day = document.createElement('select');

    function createOption(txt, val) {
        var option = document.createElement('option');
        option.value = val;
        option.appendChild(document.createTextNode(txt));
        return option;
    }

    function clearChildren(ele) {
        while (ele.hasChildNodes()) {
            ele.removeChild(ele.lastChild);
        }
    }

    function recalculateDays() {
        var month_index = sel_month.value,
            df = document.createDocumentFragment();
        for (var i = 0, l = calendar[month_index][1]; i < l; i++) {
            df.appendChild(createOption(i + 1, i));
        }
        clearChildren(sel_day);
        sel_day.appendChild(df);
    }

    function generateMonths() {
        var df = document.createDocumentFragment();
        calendar.forEach(function(info, i) {
            df.appendChild(createOption(info[0], i));
        });
        clearChildren(sel_month);
        sel_month.appendChild(df);
    }

    sel_month.onchange = recalculateDays;

    generateMonths();
    recalculateDays();

    cont.appendChild(sel_year);
    cont.appendChild(sel_month);
    cont.appendChild(sel_day);
}());​

And here is your jsFiddle Demo

于 2012-08-14T15:53:46.000 回答