尝试用REST API调用生成的javascript数组填充下拉框时发生错误

问题描述 投票:0回答:2

我有一个带有隐藏下拉框的页面,当通过JavaScript inner.HTML =命令选中一个复选框时,该页面就会出现。据我所知,我将无法从document.onload函数中填充此数据,但我却得到了<div>,当我执行此操作时,我将其设置为style="display:none"。下拉框中输入要填充的选项,但是在尝试执行此操作时出现错误消息'Unable to set property 'innerHTML' of undefined or null reference'<select>标签不能赋予ID或innerHTML值吗?

下面的代码:

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"},
]
javascript html json
2个回答
1
投票

问题是,当您这样做时:

document.onload = getSystems();

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

document.onload = getSystems;

或直接将功能分配给document.onload

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

编辑

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

Adding options to select with javascript


0
投票

如@Christos Lytras所述,您不应在getSystems中使用括号。

添加:同时更新您的for循环:

/* other code */
for (var obj in systemOptions) {
        system.innerHTML += "<option value='" + obj.Title + "'>" + obj.Title + "</option>";
      }
/* other code */
© www.soinside.com 2019 - 2024. All rights reserved.