用 Javascript (Html) 创建日历

Question

I am trying to create a calendar and I have two problems.

1. The months will not display as text, but rather as numbers.
2. The days also won't update when I change the months. Months have different amounts of days and thus the amount of days in the days select needs to update based on the choice in the month select.

Day/Month/Year format.

Here is the html code:

<form>
  <select id="day" name="day">
  </select>

  <select id ="month" onchange = "changeDays(this)" name="month" >
  </select>

  <select id="year" name="year">
  </select>
</form>
</div>

Here is the Javascript code:

setCalendar('day',1, 31, false); 
setCalendar('month',1, 12, false); 
setCalendar('year',1910, 2017, false); 

function setCalendar(id, min, max, logic){

if(logic){
removeOptions(id); 
}

var monthsarray = ["January", "February","March" ,"April" ,"May" ,"June" ,"July" ,"August" ,"September", "October", "November" , "December"];  

for  (i = min; i <= max; i++){
select = document.getElementById(id); 
var opti = document.createElement("option"); 
opti.value = i; 
opti.text = id === "day" || "year" ? i.toString() : monthsarray[i-1]; 
select.add(opti); 
}

}


function changeDays(SelectObject){

switch(SelectObject){
case 1: 
//January
 setCalendar('day',1,31,true); 
break; 
case 2: 
//February
 setCalendar('day',1,28,true); 
break; 
case 3:
//March 
 setCalendar('day',1,31,true); 
break; 
case 4:
//April  
 setCalendar('day',1,30,true); 
break; 
case 5:
//May 
 setCalendar('day',1,31,true); 
break; 
case 6: 
//June
 setCalendar('day',1,30,true); 
break; 
case 7: 
//July
 setCalendar('day',1,31,true); 
break; 
case 8:  
//August
 setCalendar('day',1,31,true); 
break;
case 9: 
//September
 setCalendar('day',1,30,true); 
break; 
case 10: 
//October
 setCalendar('day',1,31,true); 
break; 
case 11: 
//November
 setCalendar('day',1,30,true); 
break; 
case 12:  
//December
 setCalendar('day',1,31,true); 
break;  
}

}

function removeOptions(selectObject)
{
    var i;
    for(i = selectObject.options.length - 1 ; i >= 0 ; i--)
    {
        selectObject.remove(i);
    }
}

Answer 1

opti.text = id === "day" || "year" ? i.toString() : monthsarray[i-1]; 

Year is truthy, so monthsarray will never be taken as value. Do this:

opti.text = id === "day" || id==="year" ? i.toString() : monthsarray[i-1]; 

Also you dont want

switch(SelectObject){

You want to switch on its value:

switch(SelectObject.options[SelectObject.selectedIndex].value){

Mistake three

select.add(opi) => select.appendChild(opi)