Javascript fill select box

[Code]

$.ajax
({
    'method': 'GET',
    'source': '/bpv-registratie/periods/show_period_list_by_year.html',
    'charge': function () 
    {
    },
    'finish': function (xmlHttp) 
    {       
        var options = new Array();
        var response = eval('(' + xmlHttp.responseText + ')');                                              

        var child = document.createElement('option');
        child.setAttribute('value', 'none');
        child.setAttribute('checked', 'checked');
        child.innerHTML = '&nbsp';

        options.push(child);

        for (var c = 0; c < response.length; c++)
        {
            var child = document.createElement('option');
            child.setAttribute('value', response.data[c].periode_id);
            child.innerHTML = response.data[c].periode_naam +
                              ' (' + 
                              response.data[c].periode_startdatum +
                              ' t/m ' +
                              response.data[c].periode_einddatum +
                              ' )';             
            options.push(child);
        }                                               
        for (var a = 0; a < obj.childNodes.length; a++)
        {
            var e = obj.childNodes[a].getElementsByTagName("select");

            for (var f = 0; f < e.length; f++)
            {       
                e[f].length=0;                  
                for (var o = 0; o < options.length; o++)
                {               
                    e[f].appendChild(options[o]);               
                }
            }
        alert('test');
        }   
    }
});

[Problem]

Running the code above with the alert, it sh开发者_Go百科ows that all the select boxes do get filled with the options I want them to. However as soon as it starts filling the next select box, the previous is being cleared again. Does anyone know why?

[Situation]

I have a bunch of select boxes generated from about the same code. These represent a class a person can be in. The class should be selected from the selectbox. However if the teacher wishes to change the person to a different period, that would most likely mean that there are different classes available in that period so what I'm trying to do is fill the select boxes with the classes from the new period.

I think your problem is that a single option object can only be in one <select> at a time. Your first trip through the loop fills the first select, then your second trip through the loop moves the options from the first <select> to the second. Rinse and repeat until your final <select> ends up with all the options.

The solution is to create the options when you're about to add them to the <select>. Your first loop should just build an array to hold the values and labels, then expand that simple data to option DOM elements and hand them over to the <select>. This will create a unique set of option objects for each <select>.

Here's a simple example that you can play with to see what's going on:

http://jsfiddle.net/ambiguous/9WuQC/

I'll include the fiddle inline for future reference; the HTML:

<select id="a"></select>
<select id="b"></select>
<button id="c">fill first</button>
<button id="d">fill second</button>

And JavaScript:

var options = [ ];
var option;
for(var i = 0; i < 10; ++i) {
    option = document.createElement('option');
    option.setAttribute('value', i);
    option.innerHTML = i;
    options.push(option);
}

$('#c').click(function() {
    var s = document.getElementById('a');
    for(var i = 0; i < options.length; ++i)
        s.appendChild(options[i]);
});
$('#d').click(function() {
    var s = document.getElementById('b');
    for(var i = 0; i < options.length; ++i)
        s.appendChild(options[i]);
});

I'm not sure what obj actually is, but in my mind, this is what is happening (denoted by the comments):

//loop round all the child nodes of obj (not just immediate children)
for (var a = 0; a < obj.childNodes.length; a++)
{
    //get all <select> elements under the current child (a) of obj 
    var e = obj.childNodes[a].getElementsByTagName("select");

    //loop round our selects under the current child node
    for (var f = 0; f < e.length; f++)
    {       
        e[f].length=0;                  
        for (var o = 0; o < options.length; o++)
        {               
            e[f].appendChild(options[o]);               
        }
    }
    alert('test');
}   

The comment 'not just immediate' is pertintent here. Say you have a structure

<div id="a">
    <div id="b">
        <div id="c">
             <select id="d"></select>
        </div>
    </div>
</div>

When you loop through the children of 'a' you get ALL the children, i.e. b,c,d. Next time around your child iteration you are looking at 'b' itself, so you get 'c' and 'd'.

In each of these loops, you populate the select box.

The short answer is that you have probably made a false assumption about the childNodes property.