简体   繁体   English

如何加载html <select>使用PHP中的JavaScript加载页面时的值?

[英]How to load html <select> with values upon loading the page using javascript in PHP?

I am having problem on how to load the HTML <select> with values whenever the page is first loaded or when refreshed. 我遇到的问题是,无论何时首次加载页面或刷新时,如何使用值加载HTML <select>

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. 例如,当我选择3月份的日期为31日或4月时,日期将仅为30日。

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. 我在<select>上尝试了onload ,但它没有用。 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>

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或其他框架

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>

尝试将onload属性放在body标签中而不是select标签中。

<body onload="loadDays();">

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM