javascript, dom - почему дочерние узлы выбора пронумерованы каждые 2

Question

У меня странная проблема. Я хочу пройти через дочерние узлы выбора. Просто верно? Так что это мой HTML:

    <select multiple="multiple" id="selectBoxOne" size="5" class="selectListBox">
            <option value="0" id="multiple0" {MULTIPSEL0}>0</option>
            <option value="1" id="multiple1" {MULTIPSEL1}>1</option>
            <option value="2" id="multiple2" {MULTIPSEL2}>2</option>
            <option value="3" id="multiple3" {MULTIPSEL3}>3</option>
            <option value="4" id="multiple4" {MULTIPSEL4}>4</option>
            <option value="5" id="multiple5" {MULTIPSEL5}>5</option>
    </select>

Дело в том, что дом выглядит так:

Так что проблема в том, что у меня есть пустые узлы между реальными узлами. Реальные узлы - 1,3,5,7,9,11 вместо 1,2,3,4,5. Так что, если я использую что-то вроде:

       alert(document.getElementById('selectBoxOne').childNodes[2].innerHTML);

Я получаю неопределённость.

Я использую этот скрипт во многих местах, поэтому я не могу читать только нечетные числа (так как остальные места нормальные, без пустых дочерних элементов между ними).

Любая идея, почему это произошло или как это исправить? Спасибо за ваше время.

Примечание: {MULTIPSEL4} -> является переменной шаблона. Эмпи в этом случае. Является ли select = "selected" в других случаях.

Js:

   for (i = 1; i <= optionNumber; i++)
{
    selectOptions[i-1] = document.getElementById('selectBoxOne').childNodes[i].innerHTML;       
}
alert(selectOptions);

Результат:

Answer 1

Между элементами опции есть пробел. Ваш парсер генерирует текстовый узел для каждого из них.

Используйте getElementsByTagName('option') вместо .childNodes в общем DOM или .options, если у вас есть API DOM с поддержкой HTML.

Answer 2

Вы делаете это неправильно.

Правильный способ перебора выпадающих опций:

var oDDL = document.getElementById("selectBoxOne");
for (var i = 0; i < oDDL.options.length; i++) {
    var option = oDDL.options[i];
    if (option.selected) {
        alert("option with value " + option.value + " is selected");
    }
}

Эти текстовые узлы есть, потому что в источнике HTML у вас есть новая строкаи пробелы между элементами option.Вы можете избежать этого с помощью:

<select multiple="multiple" id="selectBoxOne" size="5" class="selectListBox"><option value="0" id="multiple0" {MULTIPSEL0}>0</option><option value="1" id="multiple1" {MULTIPSEL1}>1</option><option value="2" id="multiple2" {MULTIPSEL2}>2</option><option value="3" id="multiple3" {MULTIPSEL3}>3</option><option value="4" id="multiple4" {MULTIPSEL4}>4</option><option value="5" id="multiple5" {MULTIPSEL5}>5</option></select>

Это не нужно, потому что у вас есть лучший способ итерации элементов.