[英]Option tag not appearing in select Javascript
我有一个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>
由于innerHTML
尝试始终创建有效的语法,
oBoxContent.innerHTML += "<select name=\"clientCategories\">";
实际上创建此DOM代码段:
<select name="clientCategories"></select>
因此,在将其分配给innerHTML
之前,需要首先汇编HTML字符串:
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;
innerHTML
很奇怪,不能像字符串一样工作。 您传递的HTML会被解析,因此您传递的初始<select>
会自动关闭。
相反,将其构建为一个字符串,并在事实之后使用innerHTML
。
var oBoxContentHTML = "<select name='clientCategories'>";
// etc.
oBoxContent.innerHTML += oBoxContentHTML;
我会使用document.createElement()而不是仅仅弄乱HTML字符串。
var oClientCategories = [{id: 1, label:"one"},{id: 2, label: "two"},{id: 3, label: "three"}];
var selectBox = document.createElement("select");
for(var i=0;i<oClientCategories.length;i++){
var elem = oClientCategories[i];
var addedOption = document.createElement("option");
addedOption.value = elem.id;
addedOption.innerHTML = elem.label;
selectBox.appendChild(addedOption);
}
var cont = document.getElementById("categorieBox_content");
cont.appendChild(selectBox);
可用的jsfiddle: http : //jsfiddle.net/V3fjx/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.