[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;
            };      

    }
}