populate select options

[kat99]

Hi I have this question about a loop that would create many numeric-value drop downs on a page( so there are many 'select' tags with ids and I try to add to each of them a dropdown numeric option list). So far I have managed to populate with javascript only one per page. I am trying to make a loop that would take various id-s of the 'select' tags in html, and populate the drop downs. I need different ids for each of them, so I would be able to display chosen option by the user with its name. However, every time when I try to make a loop (in the setOptionsForDropdown()), it returns value 'undefined'.
I thought I might just copy and paste the setOptionsForDropdown() function for every product that needs a populated drop down, but I thought maybe someone would advice me on how to make it?.. Thank you in advance!...

function setOptionsForDropdown(){
var setNumber = document.getElementById('product1'); /*I have 10 products on a page, each needs the same dropdown*/
for(var i = 0; i <=20; i++) {
var addOption = document.createElement('option');
addOption.innerHTML = [i];
addOption.value = [i];
var quantityChosen = setNumber.appendChild(addOption);
}
}

/*This function takes selected value (it is invocated by 'onchange' event assigned to the select tag) and displays it in the assigned html div*/

function displayQuantInHtmlDiv(){
var getQuant = document.getElementById("product1").value;
var grabDiv = getInput ("divQuant");
grabDiv.innerHTML = getQuant;
}

[Old Pedant]

This is clearly very wrong:

    addOption.innerHTML = [i];
    addOption.value = [i];

options do not *HAVE* any innerHTML property.

In addition, you are setting the value to an *ARRAY*!!! [i] is an array of one element. Why?

Let's just throw out your code, okay? And do it the simple simple way.

function setOptionsForDropdown()
{ 
   for ( prodnum = 1; prodnum <= 10; ++prodnum )
   {
        var select = document.getElementById("product" + prodnum );
        for(var i = 0; i <=20; i++) 
        {
            select.options[i] = new Option( i, i );
        }
    }
}

I would also like to see your getInput function.

If indeed "divQuant" is the ID of some <div>, then why would you name the function getInput instead of getOutput or getDiv. Or, for that matter, why even *have* that function???

Why not simply:

<select id="product1"
        onchange="document.getElementById('divQuant').innerHTML=this.value;">

or equivalent?

That is, you could do it all in the same function:

function setOptionsForDropdown()
{ 
   for ( prodnum = 1; prodnum <= 10; ++prodnum )
   {
        var select = document.getElementById("product" + prodnum );
        for(var i = 0; i <=20; i++) 
        {
            select.options[i] = new Option( i, i );
        }
        select.onchange = 
            function( ) 
            {
                document.getElementById('divQuant').innerHTML=this.value;
            };      

    }
}