Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    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;
                };      
    
        }
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •