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 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cascading DropDown Lists..

    I'm looking to have 3 dropdown lists A,B & C
    When A is changed B updates, When B is changed C updates.

    I've some working examples, but they all use the value fields so I can't assign values to A,B or C and I need to be able to do this.

    Any ideas ?

    This is post has one script that works, but I still can't assign values to the dropdowns.
    http://www.codingforums.com/showthread.php?t=164733

    Thanks

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    Quote Originally Posted by Mad_T View Post
    I'm looking to have 3 dropdown lists A,B & C
    When A is changed B updates, When B is changed C updates.

    I've some working examples, but they all use the value fields so I can't assign values to A,B or C and I need to be able to do this.

    Any ideas ?

    This is post has one script that works, but I still can't assign values to the dropdowns.
    http://www.codingforums.com/showthread.php?t=164733

    Thanks
    Please explain what you mean by the last statement.

    What values do you wish to assign to the drop downs?
    What are the values and what are the associated visible parts of the dropdowns?
    What values should be assigned to A, B and C? And what selections should be displayed when A is changed to B or C?

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for taking the time to reply

    The script I've tested works fine, but it seems to be using the dropdown list values to link to the next list. This won't work for me as I need to get the true values from each list.

    This is what I'm trying to achieve.
    3 Lists A, B & C

    LIST A will contain upto 6 entries, but to start with 3 will be fine:
    User, Device, Location

    I would like 'A' to show as User, Device and Location with each entry having it's own name as the value. eg:
    <option value="user">User</option>

    Then depending on what is selected from A, list B will need to update to show the relevant entries.

    If Users is selected in A, B would update to show a list of user names, the value set against each name is unique and can be between 10 - 15 characters.

    If Device is selected in A, B would update to show a list of device names, the value set against each name is unique and can be between 10 - 15 characters.

    If Location is selected in A, B would update to show a list of location names, the value set against each name is unique and can be between 10 - 15 characters.

    List C is slightly different and ideally is based on list A. So if A is Users a predefined list for users would be listed. The values would be unique for each entry. A new list presented if A = device and a last list if A = location.

    I hope that makes more sense

    Thanks again.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    This should give you a start in populating a second select list according to the selection made in the first:-

    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    
    var countries = [ ];
    countries["Egypt"]   = ["Cairo","Alexandria","Sharm","Luxor"];
    countries["Germany"] = ["Munchen","Dortmund","Berlin","Koln"];
    countries["France"] = ["Paris", "Rouen", "Lyon", "Marseilles"];
    countries["USA"]     = ["New York","Chicago","Dallas","Seattle","Los Angeles", "Atlanta", "Boston"];
    countries["Japan"]   = ["Tokyo","Osaka","Kyoto","Sapporo"];
    
    function switchCountry(selCountry) {
    var citySel = selCountry.form.City;
    for ( var s = citySel.options.length-1; s > 0; --s )  {
    citySel.options[s] = null;
    }
    
    var chosen = selCountry.options[selCountry.selectedIndex].text;
    var cList = countries[chosen];
    if ( cList != null )   {
    for ( var i = 0; i < cList.length; ++i )   {
    citySel.options[i+1] = new Option(cList[i],cList[i]);
    }
    }
    
    }
    
    function showSelection() {
    var country = document.forms[0].Country.value;
    var city = document.forms[0].City.value;
    if (city != "") {
    alert ("You selected " + city + " in " + country);
    }
    }
    
    </script>
    
    </head>
    <body>
    <form>
    <select name="Country" onchange="switchCountry(this);">
    <option value = "">Choose Country</option>
    <option value = "Egypt">Egypt</option>
    <option value = "Germany">Germany</option>
    <option value = "France">France</option>
    <option value = "Japan">Japan</option>
    <option value = "USA">USA</option>
    </select>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <select name="City" onchange = "showSelection()">
    <option>Choose City</option>
    </select>
    </form>
    </body>
    </html>
    I am afraid that I do not understand how your List C is arrived at.
    Last edited by Philip M; 05-31-2012 at 01:09 PM. Reason: Spelling error

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    	var categories = [];   // Option Text|Option Value|use array;
    	categories['Kids'] = ['Birthday|1|Birthday','Christmas|2|Christmas'];
    	categories['Adults'] = ['Birthday|3|Birthday','Christmas|4|Christmas','Corporate|5|Corporate'];
    	categories['Mixed'] = ['Birthday|6|Birthday','Christmas|7|Christmas','Corporate|8|Corporate'];
    
    	categories['Birthday'] = ['Disney|DisneyValue','Pirates|PriatesValue','Princess|PrinessValue','Ballet|BalletValue','Magic|MagicValue','Surfer|SurferValue','Hawaiian|HawaiianValue','50\'s 60\'s 70\'s|50\'sValue','Rock & Roll|RRValue','Horses|HorsesValue','Zoo|ZooValue'];
    	categories['Christmas'] = ['Magic|MagicValue','Hawaiian|HawaiianValue','50\'s 60\'s 70\s|50\'sValue'];
    	categories['Corporate'] = ['Magic|MagicValue','Hawaiian|HawaiianValue','50\'s 60\'s 70\s|50\'sValue','Rock & Roll|RRValue'];
    
    	var dynList = ['partyType','theme'];  // the "names" of the dynamic lists, from top to bottom, in the form;
    
    	function fillSelect(sel,to,step,ary){
            var frm=sel.form
            ary=ary||fillSelect[sel.name];
     	for (var i=step; i<dynList.length; i++)
    			{
    			 document.forms[0][dynList[i]].length = 1;
    			 document.forms[0][dynList[i]].selectedIndex = 0;
    			}
          fillSelect[to]=[];
          if (ary&&frm[to]){
    		var nCategory = categories[ary[sel.selectedIndex-1]];
            if (nCategory){
    		for (each in nCategory)
    			{
    			 var nOption = document.createElement('option');
    			 var nInfo = nCategory[each].split("|");
    			 nOption.setAttribute('value',nInfo[1]);
                 fillSelect[to].push(nInfo[2]);
    			 nOption.appendChild(document.createTextNode(nInfo[0]));
    			 frm[to].appendChild(nOption);
    			}
           }
           }
    }
    
    </script>
    </head>
    	<body>
    		<form method="post" action="">
    
    			<select name="ageGroup" onchange="fillSelect(this,'partyType',0,['Kids','Adults','Mixed'])">
    				<option value="">- Age Group -</option>
    				<option value="A">Kids (up to 21)</option>
    				<option value="B">Adults (21 and up)</option>
    				<option value="C">Kids and Adults</option>
    			</select>
    
    			<select name="partyType" size="1" onchange="fillSelect(this,'theme',1)">
    				<option value="">- Party Type -</option>
    			</select>
    
    			<select name="theme">
    				<option value="">- Party Theme -</option>
    			</select>
    
    		</form>
    	</body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    New Coder
    Join Date
    Mar 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the examples.
    @vwphillips - how do I set the values for the 3 lists ? and then capture the values ?

    Thanks

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    see code in red

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    	var categories = [];   // Option Text|Option Value|use array;
    	categories['Kids'] = ['Birthday|1|Birthday','Christmas|2|Christmas'];
    	categories['Adults'] = ['Birthday|3|Birthday','Christmas|4|Christmas','Corporate|5|Corporate'];
    	categories['Mixed'] = ['Birthday|6|Birthday','Christmas|7|Christmas','Corporate|8|Corporate'];
    
    	categories['Birthday'] = ['Disney|DisneyValue','Pirates|PriatesValue','Princess|PrinessValue','Ballet|BalletValue','Magic|MagicValue','Surfer|SurferValue','Hawaiian|HawaiianValue','50\'s 60\'s 70\'s|50\'sValue','Rock & Roll|RRValue','Horses|HorsesValue','Zoo|ZooValue'];
    	categories['Christmas'] = ['Magic|MagicValue','Hawaiian|HawaiianValue','50\'s 60\'s 70\s|50\'sValue'];
    	categories['Corporate'] = ['Magic|MagicValue','Hawaiian|HawaiianValue','50\'s 60\'s 70\s|50\'sValue','Rock & Roll|RRValue'];
    
    	var dynList = ['partyType','theme'];  // the "names" of the dynamic lists, from top to bottom, in the form;
    
    	function fillSelect(sel,to,step,ary){
            var frm=sel.form
            ary=ary||fillSelect[sel.name];
     	for (var i=step; i<dynList.length; i++)
    			{
    			 document.forms[0][dynList[i]].length = 1;
    			 document.forms[0][dynList[i]].selectedIndex = 0;
    			}
          fillSelect[to]=[];
          if (ary&&frm[to]){
    		var nCategory = categories[ary[sel.selectedIndex-1]];
            if (nCategory){
    		for (each in nCategory)
    			{
    			 var nOption = document.createElement('option');
    			 var nInfo = nCategory[each].split("|");
    			 nOption.setAttribute('value',nInfo[1]);
                 fillSelect[to].push(nInfo[2]);
    			 nOption.appendChild(document.createTextNode(nInfo[0]));
    			 frm[to].appendChild(nOption);
    			}
           }
           }
     function bycls(nme,el){
      for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
       if(reg.test(els[z0].className)){
        ary.push(els[z0]);
       }
      }
      return ary;
     }
    
    }
    
    </script>
    </head>
    	<body>
    		<form method="post" action="">
    
    			<select name="ageGroup" onchange="fillSelect(this,'partyType',0,['Kids','Adults','Mixed']);alert(this.value);">
    				<option value="">- Age Group -</option>
    				<option value="A">Kids (up to 21)</option>
    				<option value="B">Adults (21 and up)</option>
    				<option value="C">Kids and Adults</option>
    			</select>
    
    			<select name="partyType" size="1" onchange="fillSelect(this,'theme',1);alert(this.value);">
    				<option value="">- Party Type -</option>
    			</select>
    
    			<select name="theme" onchange="alert(this.value);">
    				<option value="">- Party Theme -</option>
    			</select>
    
    		</form>
    	</body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #8
    New Coder
    Join Date
    Mar 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks..
    When I tried that I didn't get the values for the lists.
    This is what I used :

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    	var categories = [];   // Option Text|Option Value|use array;
    	categories['Kids'] = ['Birthday|1|Birthday','Christmas|2|Christmas'];
    	categories['Adults'] = ['Birthday|3|Birthday','Christmas|4|Christmas','Corporate|5|Corporate'];
    	categories['Mixed'] = ['Birthday|6|Birthday','Christmas|7|Christmas','Corporate|8|Corporate'];
    
    	categories['Birthday'] = ['Disney|DisneyValue','Pirates|PriatesValue','Princess|PrinessValue','Ballet|BalletValue','Magic|MagicValue','Surfer|SurferValue','Hawaiian|HawaiianValue','50\'s 60\'s 70\'s|50\'sValue','Rock & Roll|RRValue','Horses|HorsesValue','Zoo|ZooValue'];
    	categories['Christmas'] = ['Magic|MagicValue','Hawaiian|HawaiianValue','50\'s 60\'s 70\s|50\'sValue'];
    	categories['Corporate'] = ['Magic|MagicValue','Hawaiian|HawaiianValue','50\'s 60\'s 70\s|50\'sValue','Rock & Roll|RRValue'];
    
    	var dynList = ['partyType','theme'];  // the "names" of the dynamic lists, from top to bottom, in the form;
    
    	function fillSelect(sel,to,step,ary){
            var frm=sel.form
            ary=ary||fillSelect[sel.name];
     	for (var i=step; i<dynList.length; i++)
    			{
    			 document.forms[0][dynList[i]].length = 1;
    			 document.forms[0][dynList[i]].selectedIndex = 0;
    			}
          fillSelect[to]=[];
          if (ary&&frm[to]){
    		var nCategory = categories[ary[sel.selectedIndex-1]];
            if (nCategory){
    		for (each in nCategory)
    			{
    			 var nOption = document.createElement('option');
    			 var nInfo = nCategory[each].split("|");
    			 nOption.setAttribute('value',nInfo[1]);
                 fillSelect[to].push(nInfo[2]);
    			 nOption.appendChild(document.createTextNode(nInfo[0]));
    			 frm[to].appendChild(nOption);
    			}
           }
           }
    }
    
    </script>
    </head>
    	<body>
    	<?php
    	echo $_POST['agegroup']."<br/>";
    	echo $_POST['partytype']."<br/>";
    	echo $_POST['theme']."<br/>";
    	?>
    		<form method="post">
    
    			<select name="ageGroup" onchange="fillSelect(this,'partyType',0,['Kids','Adults','Mixed'])">
    				<option value="">- Age Group -</option>
    				<option value="A">Kids (up to 21)</option>
    				<option value="B">Adults (21 and up)</option>
    				<option value="C">Kids and Adults</option>
    			</select>
    
    			<select name="partyType" size="1" onchange="fillSelect(this,'theme',1)">
    				<option value="">- Party Type -</option>
    			</select>
    
    			<select name="theme">
    				<option value="">- Party Theme -</option>
    			</select>
    <input type="submit" name="submit" value="submit">
    		</form>
    	</body>
    </html>
    Any ideas ? Thanks


  •  

    Posting Permissions

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