Question

I have an odd problem. I want to go through the child nodes of a select. Simple right? So this is my 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>

The thing is that dom looks like this:

So the problem is that I have that empty nodes between the real nodes. The real nodes are 1,3,5,7,9,11 instead of 1,2,3,4,5. So if I usesomething like:

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

I get undefined.

I use this script in many places so I can’t read only the odd numbers (since the other places are normal, without empty childs between).

Any ideea why this happened or how to fix it? Thank your for your time.

Note: {MULTIPSEL4} -> is a template variable. Is empy in this case. Is select=”selected” in other cases.

Js:

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

Result:

Answer 1

You have white space between the option elements. Your parser is generating a text node for each one.

Use getElementsByTagName('option') instead of .childNodes in a generic DOM or .options if you have an HTML aware DOM API.