У меня есть массив 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>
Поэтому вам сначала нужно собрать свою строку 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;
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/