CodingForums.com - populate select options

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - populate select options (http://www.codingforums.com/showthread.php?t=285569)

populate select options

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

This is clearly very wrong:

Code:

    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.

Code:

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:

Code:

<select id="product1"

        onchange="document.getElementById('divQuant').innerHTML=this.value;">

or equivalent?

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

Code:

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;

            };      



    }

}