Опциональный тег не отображается в выбранном Javascript

Question

Опциональный тег не отображается в выбранном Javascript

0

У меня есть массив 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>

oliboon 03 окт. 2013, в 20:59

Источник

0

Потому что innerHTML не похож на построение строки. Он закрывает теги.
epascarello 03 окт. 2013, в 18:44

Теги:

javascript

html

3 ответа

1

innerHTML является странным и не совсем работает как строка. HTML-код, который вы передаете, анализируется, поэтому начальный <select> вы передаете, автоматически закрывается.

Вместо этого постройте его как одну строку и используйте innerHTML после факта.

var oBoxContentHTML = "<select name='clientCategories'>";
// etc.
oBoxContent.innerHTML += oBoxContentHTML;

Explosion Pills 03 окт. 2013, в 15:51

0

Я бы использовал 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/

Nile 03 окт. 2013, в 16:54

Ещё вопросы

Потому что innerHTML не похож на построение строки. Он закрывает теги.

Steve · Accepted Answer · 2013-10-03T15-51-00.000Z

Поскольку 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;