SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right. I'm trying to add <option> elements to a <select> list. It isn't going too well! The option elements are years from 2004-2013. My code below successfully increments my year variable, but I'm obviously going awry with how I'm writing to the document. At the moment I get 10 separate select boxes instead of the single select list containing the 10 options for each year. If someone could point me in the right direction to resolve I'd be very grateful.

    Code:
    HTML Code:
    <body>
    <script language="JavaScript">
    <!-- start JS code hide
    
    // loop to create the list
    
    
    var year = 2003
    
    for (var i=1; i <=10; i++)
    {
    	year++;
    	document.write("<select name='years'>");
    	document.write("<option>" + year + "</option>");
    
    }
    
    
    // end JS code hide -->
    </script>
    <form name="yearform">
    </select>
    </form>
    </body>
    Last edited by siamino; May 9, 2009 at 10:21. Reason: not required.

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code inside the loop body gets executed each time the loop, loops.

    http://www.w3schools.com/TAGS/tag_Select.asp
    Notice how a select menu has a single open and close <select> element, and in between those, are multiple <option> elements.

    Since you want to create one menu, you dont want the <select> tags inside of the loop.

  3. #3
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks crmalibu. I literally just realised that once I loaded the page in FireBug (what a great little tool!)

    Removing the <select> from the loop did indeed resolve.

    var year = 2003
    document.write("<select name='years'>");

    for (var i=1; i <=10; i++)
    {
    year++;
    document.write("<option>" + year + "</option>");

    }

    Thanks again for your help.


Bookmarks

Posting Permissions

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