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:

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:

• javascript
• html
• dom

2 Answers 2

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.

You are doing it the wrong way.

The correct way to iterate over drop down options is:

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");
    }
}

Those text nodes are there because in the HTML source you have newline and blank space characters between the option elements. You can avoid this by:

<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>

By you don't have to because you have better way to iterate the items.