1,105,538 Community Members

populate numeric dropdown with javascript

Member Avatar
katties
Newbie Poster
23 posts since Apr 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 
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;

}
Member Avatar
AleMonteiro
Master Poster
758 posts since Aug 2010
Reputation Points: 115 [?]
Q&As Helped to Solve: 143 [?]
Skill Endorsements: 29 [?]
 
2
 

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');
Member Avatar
katties
Newbie Poster
23 posts since Apr 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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!

Question Answered as of 1 Year Ago by AleMonteiro
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: