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;


Edited by katties

4 Years
Discussion Span
Last Post by katties


I'd made it something like this:

function initializeSelect(selectId, divQuantityId){  

        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

    // 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');

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!

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.