populate numeric dropdown with javascript

[katties]

Hi I have this question about a loop that would create many numeric-value drop downs on a page. 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. Every time when I try to make a loop for them 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;

}

[AleMonteiro]

Hello,

I'd made it something like this:

function initializeSelect(selectId, divQuantityId){  

    var 
        select = document.getElementById(selectId), // gets the select element
        divQuantity = document.getElementById(divQuantityId);  // gets the div element

    for(var i = 0; i <=20; i++) { 
        // create the option
        var option = document.createElement('option');
        option.innerHTML = i;
        option.value = i;

        // append the option
        select.appendChild(addOption);
    }

    // sets the onChange event to the select
    select.onchange = function() {
        divQuantity.innerHTML = select.value; // display the selected value on the div
    };
}

And then use the function like this:

initializeSelect('product1', 'quantity1');
initializeSelect('product2', 'quantity2');

[katties]

Absolutely brilliant! I've been trying for ages! I think I was making things overly complicated:( ... just making small steps in js. Thank you a lot!!!!!!!!!! Everything works perfectly!