CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)
-   -   dynamic dropdown list script (http://www.codingforums.com/showthread.php?t=202515)

notaloser 08-16-2010 05:43 PM
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

jmrker 08-16-2010 11:31 PM
See if you can modify from the suggestion
of post #2 on http://www.codingforums.com/showthread.php?t=202456

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

notaloser 08-17-2010 04:09 AM
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?

notaloser 08-17-2010 05:12 AM
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

Old Pedant 08-17-2010 10:27 PM
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" />


All times are GMT +1. The time now is 06:52 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.