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 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2005
    Location
    TX
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamic Select Lists

    I want to create 3 dynamic select lists. Each list will be based on the one before it. First the user will select the age group, then based on the age group, there will be a list of parties, and based on the selected party, there will be a list of themes.

    I used the code from this tutorial to create 2 lists, but when I edit it to add a third list, it seems to white out the second list (which is what the function calls for) but doesn't repopulate it.

    I'm new to JavaScript so I'm not sure what is causing this, but I don't see anything wrong with it myself

    This is my code:

    Code:
    <body>
    <form name="form1">
    
    <select name="ageGroup" size="1" onChange="updatePartyType(this.selectedIndex)" style="width: 150px">
    <option value="---" selected="selected">- Age Group -</option>
    <option value="Kids">Kids (up to 21)</option>
    <option value="Adults">Adults (21 and up)</option>
    <option value="Mixed">Kids and Adults</option>
    </select>
    
    <select name="partyType" size="1" onChange="updateTheme(this.selectedIndex)" style="width: 150px">
    <option value="- Party Type -" selected="selected">- Party Type -</option>
    </select>
    
    <select name="theme" size="1" style="width: 150px">
    <option value="- Party Theme -" selected="selected">- Party Theme -</option>
    </select>
    
    </form>
    
    <script type="text/javascript">
    var ageGroupList=document.form1.ageGroup
    var partyTypeList=document.form1.partyType
    var themeList=document.form1.theme
    
    var ageGroup=new Array()
    ageGroup[0]="---"
    
    // if "Kids" is picked these types of parties will show up
    ageGroup[1]=["Birthday|birthday", "Christmas|christmas"]
    
    // if "Adults" is picked these types of parties will show up
    ageGroup[2]=["Birthday|birthday", "Christmas|christmas", "Corporate|corporate"] 
    
    // if "mixed" is picked these types of parties will show up
    ageGroup[3]=["Birthday|birthday", "Christmas|christmas", "Corporate|corporate"] 
    
    
    var theme=new Array()
    theme[0]="---"
    
    // If "Birthday" is picked these themes will show up
    theme[1]=[
    "Disney Themes|disneyValue",
    "Pirates|piratesValue",
    "Princess|princessValue",
    "Ballet|balletValue",
    "Magic|magicValue",
    "Surfer|surferValue",
    "Hawaiian|hawaiianValue",
    "50's/60's/70's|50sValue",
    "Rock &amp; Roll|rrValue",
    "Horses|horsesValue",
    "Zoo|zooValue"]
    
    // If "Christmas" is picked these themes will show up
    theme[2]=[
    "Magic|magicValue",
    "Hawaiian|hawaiianValue",
    "50's/60's/70's|50sValue"]
    
    // If "Corporate" is picked these themes will show up
    theme[3]=[
    "Magic|magicValue",
    "Hawaiian|hawaiianValue",
    "50's/60's/70's|50sValue",
    "Rock &amp; Roll|rrValue"]
    
    // Function to update the party type based on age group
    function updatePartyType(selectedAgeGroup)
    {	
    	partyTypeList.options.length=0
    	if (selectedAgeGroup>0)
    	{
    		for (i=0; i<partyType[selectedAgeGroup].length; i++)
    		partyTypeList.options[partyTypeList.options.length]=new Option(partyType[selectedAgeGroup][i].split("|")[0], partyType[selectedAgeGroup][i].split("|")[1])
    	}
    }
    
    // Function to update the theme based on type of party
    function updateTheme(selectedPartyType)
    {
    	themeList.options.length=0
    	if (selectedPartyType>0)
    	{
    		for (i=0; i<theme[selectedPartyType].length; i++)
    		themeList.options[themeList.options.length]=new Option(theme[selectedPartyType][i].split("|")[0], theme[selectedPartyType][i].split("|")[1])
    	}
    }
    
    </script>
    </body>

    Please help Thanks in advance.
    Life is a game. The plot sucks but the graphics are awesome!

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Here, try this. I re‐authored your document using code that’s a bit more modern. You can view a functional copy here.

    Note that it doesn’t work in Internet Explorer because I used the addEventListener method which that browser, unfortunately, does not support; if necessary, you should be able to easily circumvent that issue by using the traditional event registration model. I’ll leave that part to you, however.

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="Author" content="Patrick Garies"/>
        <title>XHTML 1 Strict Document</title>
    
        <style type="text/css">
          * { margin: 0; }
          html { padding: 1em; text-align: center; }
          ul, li { display: inline; }
          li:first-child:after { content: " |"; } 
          a { text-transform: capitalize; text-decoration: none; }
          abbr { border: 0 none; }
          fieldset { margin: 1em; padding: 0.5em; }
          select { width: 150px; }
        </style>
    
        <script type="text/javascript">
          <!--//--><![CDATA[//><!--
    
          var ageGroupList, partyTypeList, partyThemeList;
          var partyOptions = new Array();
          /* Party Types */
          partyOptions[0] = new Array("birthday", "Birthday");
          partyOptions[1] = new Array("Christmas", "Christmas");
          partyOptions[2] = new Array("corporate", "Corporate");
          /* Party Themes */
          partyOptions[3] = new Array("fiftiesSixtiesSeventies", "50s/60s/70s");
          partyOptions[4] = new Array("ballet", "Ballet");
          partyOptions[5] = new Array("Disney", "Disney");
          partyOptions[6] = new Array("Hawaiian", "Hawaiian");
          partyOptions[7] = new Array("horses", "Horses");
          partyOptions[8] = new Array("magic", "Magic");
          partyOptions[9] = new Array("pirates", "Pirates");
          partyOptions[10] = new Array("princess", "Princess");
          partyOptions[11] = new Array("rockAndRoll", "Rock & Roll");
          partyOptions[12] = new Array("surfer", "Surfer");
          partyOptions[13] = new Array("zoo", "Zoo");
    
          /* This creates all of the option elements. */
          for (var i = 0; i < partyOptions.length; i++) {
            eval("var " + partyOptions[i][0] + " = document.createElement('option');");
            eval(partyOptions[i][0] + ".setAttribute('value', '" + partyOptions[i][0] + "');");
            eval(partyOptions[i][0] + ".appendChild(document.createTextNode('" + partyOptions[i][1] + "'));")
            }
    
          /* This resets the one or both of the latter two select lists when called. */
          function reset(all) {
            partyThemeList.getElementsByTagName("option")[0].selected = true;
            for (var i = partyThemeList.getElementsByTagName("option").length - 1; i > 0; i--) {
              partyThemeList.removeChild(partyThemeList.getElementsByTagName("option")[i]);
              }
            if (all == true) {
              partyTypeList.getElementsByTagName("option")[0].selected = true;
              for (var i = partyTypeList.getElementsByTagName("option").length - 1; i > 0; i--) {
                partyTypeList.removeChild(partyTypeList.getElementsByTagName("option")[i]);
                }
              }
            }
    
          document.defaultView.addEventListener("load", function() {
            ageGroupList = document.getElementById("ageGroup");
            partyTypeList = document.getElementById("partyType");
            partyThemeList = document.getElementById("partyTheme");
    
            /* This populates the second select list based upon the value of the first select list. */
            ageGroupList.addEventListener("change", function() {
              reset(true);
              if (this.value == "kids") {
                partyTypeList.appendChild(birthday);
                partyTypeList.appendChild(Christmas);
                }
              else if (this.value == "adults" || "mixed") {
                partyTypeList.appendChild(birthday);
                partyTypeList.appendChild(Christmas);
                partyTypeList.appendChild(corporate);
                }
              }, false);
    
            /* This populates the third select list based upon the value of the second select list. */
            partyTypeList.addEventListener("change", function() {
              reset(false);
              if (this.value == "birthday") {
                partyThemeList.appendChild(fiftiesSixtiesSeventies);
                partyThemeList.appendChild(ballet);
                partyThemeList.appendChild(Disney);
                partyThemeList.appendChild(Hawaiian);
                partyThemeList.appendChild(horses);
                partyThemeList.appendChild(magic);
                partyThemeList.appendChild(pirates);
                partyThemeList.appendChild(princess);
                partyThemeList.appendChild(rockAndRoll);
                partyThemeList.appendChild(surfer);
                partyThemeList.appendChild(zoo);
                }
              else if (this.value == "Christmas") {
                partyThemeList.appendChild(fiftiesSixtiesSeventies);
                partyThemeList.appendChild(Hawaiian);
                partyThemeList.appendChild(magic);
                }
              else if (this.value == "corporate") {
                partyThemeList.appendChild(fiftiesSixtiesSeventies);
                partyThemeList.appendChild(Hawaiian);
                partyThemeList.appendChild(magic);
                partyThemeList.appendChild(rockAndRoll);
                }
              }, false);
            }, false);
    
          //--><!]]>
        </script>
    
      </head>
      <body>
    
        <ul>
          <li><a href="CF102817.html">View as <abbr title="Hypertext Markup Language">HTML</abbr></a> (text/html).</li>
          <li><a href="CF102817.xhtml">View as <abbr title="Extensible Hypertext Markup Language">XHTML</abbr></a> (application/xhtml+xml).</li>
        </ul>
    
        <fieldset>
          <select id="ageGroup">
            <option value="null" selected="selected">- Age Group -</option>
            <option value="kids">Kids (up to 21)</option>
            <option value="adults">Adults (21 and up)</option>
            <option value="mixed">Kids and Adults</option>
          </select>
    
          <select id="partyType">
            <option value="null" selected="selected">- Party Type -</option>
          </select>
    
          <select id="partyTheme">
            <option value="null" selected="selected">- Party Theme -</option>
          </select>
        </fieldset>
    
      </body>
    </html>
    Last edited by Arbitrator; 12-12-2006 at 02:46 PM. Reason: removed some mysterious white space in the code; removed an unintended line from the code
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New Coder
    Join Date
    Jul 2005
    Location
    TX
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow! Thank you SOOO much! I will try this out!
    Life is a game. The plot sucks but the graphics are awesome!


  •  

    Posting Permissions

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