CodingForums.com - View Single Post

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