用函数 Javascript 填充 <select>答案

【问题标题】：fill a <select> with a function Javascript用函数 Javascript 填充 <select>
【发布时间】：2015-07-09 01:41:05
【问题描述】：

我创建了一个函数，其中包含一个我想添加到 HTML 中的字符串。但是当我测试它时，它不会显示我表中声明的选项。

function test(){
  // table already defined

  var choices = "<option selected>Select...</option>";

  for (var i=0; i<tableOptions.length; i++) {
    choices += "<option>" + tableOptions[i][0] +"</option>"; 
  }

  document.getElementById("theOptions").innerHTML = choices;
}

在我的 HTML 中有

<select id="theOptions"></select>

我做错了什么？

顺便说一下，我的 test() 是在我的页面显示后自动加载的。

<body onload="test()">

【问题讨论】：

这只是一个错字还是tableOptions[i][0] +"</option>;"; 在您的代码中</option> 后面真的有一个分号？
打错字了，抱歉。
纯 javascript 而不是 jquery？
是的，我这周刚开始。对jquery一无所知。我以为我可以用那个函数添加一个字符串，但显然我错过了一些东西。
您手动输入的第一个选项怎么样？ var choices = "<option selected>Select...</option>"; - 这会出现在选择控件上吗？如果你能提供一个 JSFiddle 也很好

标签： javascript getelementbyid

【解决方案1】：

请参阅How to populate the options of a select element in javascript，了解有关创建选项并将其附加到现有<select> 元素的详细信息。

使用该方法，这似乎最接近您所得到的：

var select = document.getElementById("theOptions");
opt = document.createElement("option");
opt.innerHTML = "Select...";
select.appendChild(opt);

for(var i = 0; i < tableOptions.length; i++)
{
   var opt = document.createElement("option");
   opt.innerHTML = tableOptions[i][0];
   select.appendChild(opt);
}

【讨论】：

没问题；乐于助人！