javascript - 选项标签未出现在选择 Javascript 中

Question

我有一个 javascript 数组，我想迭代它以在 <select> 中创建选项标签。

var sBoxContent = "categorieBox_content";
var oBoxContent = document.getElementById(sBoxContent);

oBoxContent.innerHTML += "<select name=\"clientCategories\">";

for(var i=0;i<oClientCategories.length;i++) {
        var categorieId = oClientCategories[i].id;
        var categorieLabel = oClientCategories[i].label;

        oBoxContent.innerHTML += "<option value=\"" + categorieId + "\">" + categorieLabel + "</option>";
 }

oBoxContent.innerHTML += "</select>";

由于选项显示正确，因此阵列工作正常，但它出现在 <select> 之外标签。

HTML:

<td>
<select name="clientCategories"></select>
<option value="1">CategoryName</option>
</td>

Answer 1

因为 innerHTML 尝试始终创建有效的语法，

oBoxContent.innerHTML += "<select name=\"clientCategories\">"; 

实际上创建了这个 DOM 片段:

<select name="clientCategories"></select>

因此，您需要先组装 HTML 字符串，然后再将其分配给 innerHTML:

var sBoxContent = "categorieBox_content";
var oBoxContent = document.getElementById(sBoxContent);
var myHTML = "";


myHTML += "<select name=\"clientCategories\">";

for(var i=0;i<oClientCategories.length;i++) {
        var categorieId = oClientCategories[i].id;
        var categorieLabel = oClientCategories[i].label;

        myHTML += "<option value=\"" + categorieId + "\">" + categorieLabel + "</option>";
 }

myHTML += "</select>";
oBoxContent.innerHTML += myHTML;