如何在使用 PHP 中的 javascript 加载页面时加载带有值的 html <select>？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5880815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to load html <select> with values upon loading the page using javascript in PHP?
提问by Newbie Coder
I am having problem on how to load the HTML <select>with values whenever the page is first loaded or when refreshed.
我在如何在<select>首次加载页面或刷新页面时加载带有值的 HTML 时遇到问题。
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.
我实际上是在尝试创建一个带有 3 个下拉菜单的 date_select，其中包括年、月和日，其中当月菜单或年菜单更改时，它将自动调整天数。
For example, when I selected the month March the days will be 31 or April the days will be 30 only.
例如，当我选择三月时，天数将为 31 或四月，天数仅为 30。
My problem is when the page is first loaded the day-menu is empty. I tried onloadon 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.
我的问题是当页面第一次加载时，日菜单是空的。我试过onload了，<select>但没有用。我是编程的初学者，所以即使是这样的简单练习，我也遇到了麻烦。请帮忙。
date_select.php
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>
<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>
<span style="display: table-cell; ">
<select id="days" onload="loadDays();">
</select>
</span>
</span>
采纳答案by grc
Try putting the onload attribute in the body tag instead of the select tag.
尝试将 onload 属性放在 body 标签而不是 select 标签中。
<body onload="loadDays();">
回答by Nicola Peluchetti
You should consider using jQuery, a powerful and cross-browser javascript library that tries to make javascript programming more accessible.
您应该考虑使用jQuery，这是一个功能强大的跨浏览器 javascript 库，它试图使 javascript 编程更易于访问。
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)
例如，它提供了一个函数，在插入 javascript 之前等待加载 DOM 内容（它比“onload”事件更好，因为它不等待图像加载）
In jquery you (almost) always wrap your javascript in this function
在 jquery 中，您（几乎）总是将 javascript 包装在此函数中
$(document).ready(function(){
//Here goes your code
});
If you need javascript, you really should check jQuery or other frameworks
如果你需要 javascript，你真的应该检查 jQuery 或其他框架
回答by Martin Lazar
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.
我认为，如果您将 javascript 块移动到这些跨度和选择下方，然后在声明后立即调用您的函数就足够了。
<span style="display: table; ">
...
</span>
<script type="text/javascript" >
function loadDays() {
...
}
loadDays();
</script>
