Javascript 代码不会将选项放入选择框中

Question

我已经编写了一些应该将选项放入选择框中的 javascript 代码。选择框的代码如下:

<select id="dayOfTheWeek" name="dayOfTheWeek"></select>

在我的 javascript 编码中，我有一个名为 populateDays 的方法，它应该用 7 个选项填充选择框 - 一个对应一周中的每一天。它的代码如下:

function populateDays() {
var days = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
var dayOfWeek = document.getElementById("dayOfTheWeek");
var today = (new Date()).getDay();

for (var i = 0; i < days.length; i++) {
    var length = dayOfWeek.options.length;
    dayOfWeek.add(new Option(days[i], i), length);
}
dayOfWeek.selectedIndex = today;
}

稍后在脚本中调用此方法。我知道浏览器在加载时会运行 javascript 代码，因为我在 populateDays 方法中放置了一个 alert() 语句，它会在我加载页面时出现。

populateDays();

由于某种原因，当我加载页面时，选择框完全是空的。为什么 populateDays() 方法不加载带有选项的选择框？

Answer 1

嗯，它应该可以工作 just fine .如果没有:

方法 2 ( jsFiddle example ) - innerHTML

function populateDays() {
  var days = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
  var dayOfWeek = document.getElementById("dayOfTheWeek");
  var today = (new Date()).getDay();
  var options = "";

  for (var i = 0; i < days.length; i++) {
    options += '<option value="' + days[i] + '">' + days[i] + '</option>'
  }

  dayOfWeek.innerHTML = options;
  dayOfWeek.selectedIndex = today;
}

方法 3 - 以编程方式创建元素

function populateDays() {
  var days = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
  var dayOfWeek = document.getElementById("dayOfTheWeek");
  var today = (new Date()).getDay();

  for (var i = 0; i < days.length; i++) {
    var option = document.createElement("option");
    option.value = days[i];
    var optionText = document.createTextNode(days[i]);
    option.appendChild(optionText);
    dayOfWeek.appendChild(option);
  }

  dayOfWeek.selectedIndex = today;
}