我正在尝试创建一个虚拟的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>
答案 0 :(得分：11)
为此评论讨论添加一些实际内容：这是您的jQuery免费PURE JS解决方案。
我选择这样做是因为1）我讨厌编写HTML，以及2）向您展示正确学习Javascript的能力。
我的代码存在一些浏览器兼容性问题（即旧的IE版本）我会让你自己解决这些问题并自行处理。
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);
}());
这是你的jsFiddle Demo