问题描述:

I am having problem on how to load the HTML <select> with values whenever the page is first loaded or when refreshed.

I am actually trying to create a date_select with 3 dropdown menus which includes year, month, and days in which when the month-menu or year-menu is changed it will automatically adjust the number of days.

For example, when I selected the month March the days will be 31 or April the days will be 30 only.

My problem is when the page is first loaded the day-menu is empty. I tried onload on the <select> but it didn't work. I am a beginner in programming so I am having trouble even simple exercises like this. Please help.

date_select.php

<script type="text/javascript" >

function loadDays() {

var year = parseInt(document.getElementById('years').value);

var month = document.getElementById('months').value;

var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

var days = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

if ((year % 4) == 0) days[1] = 29;

var days_select = document.getElementById('days');

days_select.options.length = 0;

for(i in months) {

if (month == months[i]) {

for(var j = 1; j <= days[i]; j++ ) days_select.options[days_select.options.length] = new Option(j, j);

break;

}

}

}

</script>

<span style="display: table; ">

<span style="display: table-cell; ">

<select id="years" onchange="loadDays();">

<?php

for($year = 1900; $year <= 2100; $year++ ) {

if ($year == date('Y')) echo "<option value='$year' selected=''>" . $year . "</option>";

else echo "<option value='$year'>" . $year . "</option>";

}

?>

</select>

</span>

&nbsp;

<span style="display: table-cell; ">

<select id="months" onchange="loadDays();">

<?php

$months = array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" );

foreach($months as $month){

if ($month == date('M')) echo "<option value='$month' selected=''> " . $month . "</option>";

else echo "<option value='$month'> " . $month . "</option>";

}

?>

</select>

</span>

&nbsp;

<span style="display: table-cell; ">

<select id="days" onload="loadDays();">

</select>

</span>

</span>

网友答案:

Try putting the onload attribute in the body tag instead of the select tag.

<body onload="loadDays();">
网友答案:

I think it should be sufficient if you just move your javascript block below those spans and selects and then call your function just after it's declaration.

<span style="display: table; ">
...
</span>

<script type="text/javascript" >

 function loadDays() {
 ...
 }

 loadDays();
</script>
网友答案:

You should consider using jQuery, a powerful and cross-browser javascript library that tries to make javascript programming more accessible.

For example it provides a function that waits for the DOM content to be loaded before inserting javascript in it (and it is better than the "onload" event because it doesn't waith for images to be loaded)

In jquery you (almost) always wrap your javascript in this function

$(document).ready(function(){
         //Here goes your code
});

If you need javascript, you really should check jQuery or other frameworks

相关阅读:
Top