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
    Super Moderator JohnDubya's Avatar
    Join Date
    Nov 2006
    Location
    Missouri
    Posts
    634
    Thanks
    12
    Thanked 18 Times in 18 Posts

    Using Javascript to Dynamically Populate Select Lists

    I was looking around for a way for my users to select an option from one select box, and depending on what option they chose, it would fill the second select box with certain options. I tried one script first, but it was worthless and cluttered. I finally googled for dynamically created select boxes, and I found a script that is very, very easy to customize and use...especially if you're wanting to put the options in via PHP, like I did with this script. Hope this helps someone!

    http://www.petenelson.com/aspwatch/A...ct%20Lists.htm

    Here's the code:

    Code:
    <script language="Javascript">
    <!--
    
    function PopulateTeams() {
    
       var SportsList = document.frmMain.Sports;
       
       // Clear out the list of teams
       ClearOptions(document.frmMain.Teams);
       
       if (SportsList[SportsList.selectedIndex].value == "1") {
          AddToOptionList(document.frmMain.Teams, "1", "Oakland Athletics");
          AddToOptionList(document.frmMain.Teams, "2", "San Francisco Giants");
       }
    
       if (SportsList[SportsList.selectedIndex].value == "2") {
          AddToOptionList(document.frmMain.Teams, "3", "Oakland Raiders");
           AddToOptionList(document.frmMain.Teams, "4", "San Francisco 49ers");
       }
    
       if (SportsList[SportsList.selectedIndex].value == "3") {
          AddToOptionList(document.frmMain.Teams, "5", "Golden State Warriors");
          AddToOptionList(document.frmMain.Teams, "6", "Minnesota Timberwolves");
       }
    }
    
    
    function ClearOptions(OptionList) {
    
       // Always clear an option list from the last entry to the first
       for (x = OptionList.length; x >= 0; x = x - 1) {
          OptionList[x] = null;
       }
    }
    
    
    function AddToOptionList(OptionList, OptionValue, OptionText) {
       // Add option to the bottom of the list
       OptionList[OptionList.length] = new Option(OptionText, OptionValue);
    }
    
    
    
    //-->
    </script>
    
    
    
    <form name="frmMain">
    
    <select name="Sports" onChange="PopulateTeams();" size="4">
    <option>Choose a Sport</option>
    <option value="1">Baseball</option>
    <option value="2">Football</option>
    <option value="3">Basketball</option>
    </select>
    
    
    <select name="Teams" size="3">
    <option>                </option>
    </select>
    
    </form>
    Last edited by JohnDubya; 02-12-2007 at 02:34 PM. Reason: added the code

  • #2
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    Try this:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function popSecond()
    {
    	var secBox,second,objvalue;
    	var obj = document.all.first;
    	objvalue = obj.options[obj.selectedIndex].value;
    	if(objvalue)
    	{
    		if(objvalue == "1")
    			secBox = "First,Second,Third,Fourth,Fifth,Sixth";
    		if(objvalue == "2")
    			secBox = "Something,Else,In,Here";
    		if(objvalue == "3")
    			secBox = "This,Is,The,Third,Box";
    		secBox = secBox.split(",");
    		second = '<select name="second">';
    		for(var i=0;i<secBox.length;i++)
    			second += "<option>" + secBox[i] + "</option>"
    		second += "</select>";
    		document.getElementById("second").innerHTML = second;
    	}
    }
    </script>
    </head>
    <body>
    <select name="first" onChange="popSecond()">
    <option value="">Select one option</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    </select>
    <div id="second">
    </div>
    </body>
    </html>


  •  

    Posting Permissions

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