In my HTML page I have 2 select menus with IDs \"month\" and \"day\" - \"day\" is empty when the page loads, \"month\" has 12 options with values 1-12 corresponding to Janua
You should not be using innerHTML
to modify tags. You should be using removeChild(element);
and appendChild(element);
First you set your select box in a variable for legibility and editing purposes;
var select = document.getElementById('days');
Then you clear the select box
while ( select.childNodes.length >= 1 )
{
select.removeChild(select.firstChild);
}
Finally you fill it again with the appropriate values
for(var i=1;i<=days;i++)
{
newOption = document.createElement('option');
newOption.value=i;
newOption.text=i;
select.appendChild(newOption);
}
So at the end with your code and my code here you get the following:
function showOutboundDays(month, year)
{
var days=null;
if(month==4 || month==6 || month==9 || month==11)
days=30;
else if(month==2)
{
//Do not forget leap years!!!
if(year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) //Provided by Justin Gregoire
{
days=29;
}
else
{
days=28;
}
}
else
days=31;
var select = document.getElementById('days');
while ( select.childNodes.length >= 1 )
{
select.removeChild(select.firstChild);
}
for(var i=1;i<=days;i++)
{
newOption = document.createElement('option');
newOption.value=i;
newOption.text=i;
select.appendChild(newOption);
}
}
Leap years are now included!