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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    dynamic dropdown list script

    hello,

    i am writing a script that will update a dropdown list based on the selection of a previous list.

    the script is run by a PHP script, so instead of posting the PHP, i will post an example client-side script.

    the hierachy is:

    category, sub category, brand (but sometimes there exists no sub category and the PHP script queries and adds brands instead)
    everything works correctly, except for one major issue: you can not change the selection of the third (brand) box

    this could be an easy fix for some coders, but i am not experienced in javascript and could really use some help.

    here is an example script, sorry it is so long
    Code:
    <script language="javascript"> 
     
     
    function fillprodCat(){ 
     // this function is used to fill the category list on load
    
    addOption(document.prodCatSubCatBrand_list.add_prodCat, "1", "HD Video"); addOption(document.prodCatSubCatBrand_list.add_prodCat, "2", "Components"); addOption(document.prodCatSubCatBrand_list.add_prodCat, "3", "Audiophiles"); addOption(document.prodCatSubCatBrand_list.add_prodCat, "4", "Speakers"); addOption(document.prodCatSubCatBrand_list.add_prodCat, "5", "Whole House Audio"); addOption(document.prodCatSubCatBrand_list.add_prodCat, "6", "Furniture"); addOption(document.prodCatSubCatBrand_list.add_prodCat, "7", "Accessories");
    } function SelectprodSubCat(){ // on selection of category, this is called
    removeAllOptions(document.prodCatSubCatBrand_list.add_prodSubCat); if(document.prodCatSubCatBrand_list.add_prodCat.value == "1"){
    document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"1", "HD Television"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"2", "HD Projectors"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"3", "Screens");
    } if(document.prodCatSubCatBrand_list.add_prodCat.value == "2"){
    document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"4", "Turntables"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"5", "Receivers, amps & preamps"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"6", "DVD & CD players");
    } if(document.prodCatSubCatBrand_list.add_prodCat.value == "3"){
    document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None");
    } if(document.prodCatSubCatBrand_list.add_prodCat.value == "4"){
    document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None");
    } if(document.prodCatSubCatBrand_list.add_prodCat.value == "5"){
    document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None");
    } if(document.prodCatSubCatBrand_list.add_prodCat.value == "6"){
    document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"8", "AV Furniture"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"7", "Armchairs");
    } if(document.prodCatSubCatBrand_list.add_prodCat.value == "7"){
    document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"10", "Power Conditioning"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"9", "Remote Controls"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"11", "Mounts"); addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"12", "Cables & Interconnects");
    }
    } function SelectprodBrand(){ // ON selection of category, sub category, or brand this is called
    removeAllOptions(document.prodCatSubCatBrand_list.add_prodBrand); if(document.prodCatSubCatBrand_list.add_prodCat.value == "1"){
    if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "1"){
    document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"1", "Hitachi"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"2", "JVC"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"3", "Panasonic"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"4", "Pioneer"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"5", "Samsung"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"6", "Sharp");
    }
    if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "2"){
    document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"7", "Epson"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"8", "JVC");
    }
    if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "3"){
    document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"9", "Da-Lite");
    }
    } if(document.prodCatSubCatBrand_list.add_prodCat.value == "2"){
    if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "4"){
    document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"10", "Music Hall Audio");
    }
    if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "5"){
    document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"11", "Arcam"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"12", "Bose"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"13", "Integra"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"14", "Krell"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"15", "Pioneer");
    }
    if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "6"){
    document.prodCatSubCatBrand_list.add_prodBrand.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
    }
    } if(document.prodCatSubCatBrand_list.add_prodCat.value == "3"){
    if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){
    document.prodCatSubCatBrand_list.add_prodBrand.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
    }
    } if(document.prodCatSubCatBrand_list.add_prodCat.value == "4"){
    if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){
    document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"16", "Canton"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"17", "Dali"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"18", "Tru Audio"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"19", "Von Schweikert");
    }
    } if(document.prodCatSubCatBrand_list.add_prodCat.value == "5"){
    if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){
    document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"20", "Elan");
    }
    } if(document.prodCatSubCatBrand_list.add_prodCat.value == "6"){
    if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "8"){
    document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"21", "BDI"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"22", "Bello");
    }
    if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "7"){
    document.prodCatSubCatBrand_list.add_prodBrand.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
    }
    } if(document.prodCatSubCatBrand_list.add_prodCat.value == "7"){
    if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "10"){
    document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"23", "Richard Gray's Power Company");
    }
    if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "9"){
    document.prodCatSubCatBrand_list.add_prodBrand.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
    }
    if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "11"){
    document.prodCatSubCatBrand_list.add_prodBrand.disabled=true; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
    }
    if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "12"){
    document.prodCatSubCatBrand_list.add_prodBrand.disabled=false; addOption(document.prodCatSubCatBrand_list.add_prodBrand,"24", "Analysis Plus"); addOption(document.prodCatSubCatBrand_list.add_prodBrand,"25", "Tributaries");
    }
    }
    } function removeAllOptions(selectbox) { var i; for(i=selectbox.options.length-1;i>=0;i--) { //selectbox.options.remove(i); selectbox.remove(i); } } function addOption(selectbox, value, text ) { var optn = document.createElement("OPTION"); optn.text = text; optn.value = value; selectbox.options.add(optn); } </script>
    please let me know if this is too confusing to follow (because it certainly looks like it could be), and i will attempt to clean it up
    Last edited by notaloser; 08-17-2010 at 01:59 AM.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,077
    Thanks
    38
    Thanked 498 Times in 492 Posts
    See if you can modify from the suggestion
    of post #2 on Javascript Cascading Drop Down Menu With 4 Hierarchical Boxes

    Would be a lot easier to set-up and maintain.

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the suggestion.

    however, i'm having some trouble programming my PHP code to work with the format of your suggested script.

    does anyone have any suggestions on the issue with my posted script since it already loads everything correctly?

  • #4
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i've greatly simplified the example code if anyone earlier deferred would be interested in taking a look as well.

    even with this code, you can not change the selection of the add_prodBrand box

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head>
    <title>TEST</title>
    <script language="javascript"> 
    
    function fillprodCat(){ 
     // this function is used to fill the category list on load
    
    addOption(document.prodCatSubCatBrand_list.add_prodCat, "1", "Cat1");
    addOption(document.prodCatSubCatBrand_list.add_prodCat, "2", "Cat2");
    }
     
    function SelectprodSubCat(){
    // ON selection of category this function is called
     
    	removeAllOptions(document.prodCatSubCatBrand_list.add_prodSubCat);
     
    	if(document.prodCatSubCatBrand_list.add_prodCat.value == "1"){
    		document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false;
    		addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"1", "SubCat1");
    		addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"2", "SubCat2");
    	}
    	
    	if(document.prodCatSubCatBrand_list.add_prodCat.value == "2"){
    		document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true;
    		addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None");
    	}
    
    }
     
    function SelectprodBrand(){
    // ON selection of category, subcategory, or brand this function is called
     
    	removeAllOptions(document.prodCatSubCatBrand_list.add_prodBrand);
    	 
    	if(document.prodCatSubCatBrand_list.add_prodCat.value == "1"){
    		if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "1"){
    			document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
    			addOption(document.prodCatSubCatBrand_list.add_prodBrand,"1", "Brand1");
    			addOption(document.prodCatSubCatBrand_list.add_prodBrand,"2", "Brand2");
    		}
    	
    		if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "2"){
    			document.prodCatSubCatBrand_list.add_prodBrand.disabled=true;
    			addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
    		}
    	}
    
    	if(document.prodCatSubCatBrand_list.add_prodCat.value == "2"){
    		if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){
    			document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
    			addOption(document.prodCatSubCatBrand_list.add_prodBrand,"3", "Brand3");
    			addOption(document.prodCatSubCatBrand_list.add_prodBrand,"4", "Brand4");
    		}
    	}
    
    }
     
    function removeAllOptions(selectbox)
    {
    	var i;
    	for(i=selectbox.options.length-1;i>=0;i--)
    	{
    		//selectbox.options.remove(i);
    		selectbox.remove(i);
    	}
    }
     
    function addOption(selectbox, value, text )
    {
    	var optn = document.createElement("OPTION");
    	optn.text = text;
    	optn.value = value;
     
    	selectbox.options.add(optn);
    }
     
    </script> 
    </head>
    <body onload="fillprodCat();">
    
    <form method="post" name="prodCatSubCatBrand_list">
    <p>Category:<br><select name="add_prodCat" onChange="SelectprodSubCat();SelectprodBrand();" /><option value="">Choose Category...</option></select></p>
    <p>Sub Category:<br><select id="add_prodSubCat" name="add_prodSubCat" onChange="SelectprodBrand();" ></select></p>
    <p>Brand:<br><select id="add_prodBrand" name="add_prodBrand" onChange="SelectprodBrand();" /></select></p>
    <p><input type="submit" /></p>
    </form>
    
    </body>
    </html>
    if it helps, this example utilizes this example hierachy:

    *Cat1
    *SubCat1
    *Brand1
    *Brand2
    *SubCat2
    * (none)
    *Cat2
    * (none)
    *Brand3
    *Brand4

    the hierarchy under Cat2 shows an example of what happens when there are no sub categories under a certain product category, so 'None' is added to the subcat box with a value of '0', and brands are listed

    thanks

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,208
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Code makes no sense.

    When you change the brand, it calls the SAME FUNCTION that changing the subcat does.

    And that function *WIPES OUT* all content in the brand drop down!!!

    It then RE-CREATES the brand drop down based on the selection in the subcat drop down.

    So *OF COURSE* you can't select a brand!! Every time you try to, you are resetting the brand drop down completely.

    As your code stands, I don't understand why you have an ONCHANGE handler for the brand dropdown, at all.

    Try just getting rid of it!
    Code:
    <select name="add_prodBrand" />
    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
    •