javascript - 尝试使用 REST API 调用生成的 javascript 数组填充下拉框时出错

Question

我有一个带有隐藏下拉框的页面，当通过 JavaScript 勾选复选框时会出现该下拉框 inner.HTML =命令。据我所知，我无法从 document.onload 填充此内容。函数，我有一个 <div> ，我将设置为 style="display:none"当我进行此操作时，我有一个下拉框用于填充选项，但是我收到错误消息 'Unable to set property 'innerHTML' of undefined or null reference'当尝试这样做时。是<select>标签无法拥有 ID 或 innerHTML赋予它的值(value)？

代码如下:

var systemOptions = [];
var system = document.getElementById("systemstemp");
document.onload = getSystems();

function getSystems() {
  $.ajax({
    url: ".../_api/web/lists/getbytitle('Application List')/items?$select=Title",
    type: "GET",
    headers: {"accept": "application/json;odata=verbose"},
    success: function (data) {
      systemOptions = data.d.results;
      for (var obj in systemOptions) {
        system.innerHTML = "<option value='" + systemOptions[obj].Title + "'>" + systemOptions[obj].Title + "</option>";
      }
    }
  });
}

<p><select id="systemstemp"></select></p>

systemOptions = [
  {Title: "Call Platform"},
  {Title: "CRM"},
  {Title: "Email"},
  {Title: "Monitoring"},
]

Answer 1

问题是当你这样做时:

document.onload = getSystems();

您实际上是立即调用 getSystems 函数，而不是在 document.onload 触发时调用。为了在 onload 触发时运行 getSystems，请设置不带括号的函数:

document.onload = getSystems;

或者直接将函数分配给document.onload:

document.onload = function() {
  $.ajax({...});
}

编辑

您还应该使用 DOM API 创建选择选项，如本问答中所示:

Adding options to select with javascript