Modifying a drop down menu dynamically

livebymyheart · #1 03-12-2007, 07:21 PM

Hello:

I'd very much appreciate if someone would guide me how to implement the following function (an approach would be great, if not the outright code), which is no doubt a common feature of many websites but too much out of my depth at the present time. (if javascript is the wrong venue, being directed to a better solution would be equally helpful.)

I am selling products in which designs are printed. two drop-down forms allow input of product(t-shirt, sweatshirt, bib and mouse pads, etc) and size (S, M L, XL). How do I make the choices of size dependent on what is entered as a product, so that for example, a T-shirt would allow entry of S,M,L while a mouse pad would have no choices.

Currently, it is coded essentially as follows:

<form action="addtoorder.php" method=<post>

<label><br />
Please Enter the Product

<SELECT NAME="prodcode" SIZE="1">
<OPTION SELECTED>-
<OPTION>Adult's Lightweight Tee
<OPTION>Adult's Heavyweight Tee
<OPTION>Mousepad
<OPTION>Baby Bib - Blue Lining
<OPTION>Baby Bib - Pink Lining
</SELECT>

</br>
Please Enter the Size
<SELECT NAME="size" SIZE="1">
<OPTION SELECTED>-
<OPTION>S
<OPTION>X
<OPTION>L
<OPTION>XL
<OPTION>XXL
</SELECT>
</br>

<label><br />
<input type="submit" value="ADD TO SHOPPING CART" />
</form>

Thanks In Advance

Steve

Sorehead · #2 03-13-2007, 06:31 AM

Hi,

This is a snippet from a similar task I had for a client.
The page is in asp itself, which pulls the subcategories from a database, just so you understand why there isnt an array for each category, but you could apply the same method to your process.

Basically each subcategory is stored in an array which is relevantly named to the first category elements.

In the function subcatadd() the first for loop determines which drop down item is selected from the first category, then the switch statement takes that info and removes any subcategories already there and loads the relevant subcategories.

Hope that gives you a guideline to work by.

HTML 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
<!--

	var cat5 = new Array();
	
		cat5[0] = "Bulgaria";
		
		cat5[1] = "Dubai";
		
		cat5[2] = "America";
		
		cat5[3] = "Canada";
		
		cat5[4] = "Spain";
		
		cat5[5] = "France";
		
		cat5[6] = "Jamaica";
		
	var cat9 = new Array();
	
		cat9[0] = "Travel";
		
		cat9[1] = "Home";
		
		cat9[2] = "Car";
		
	
	function subcatadd()
		{
		var i, num, x, y
		
		for ( i = 0; i < document.addlink.category.length; i++ )
			{
			if ( document.addlink.category.options[i].selected == true )
				{
				num = i;
				}
			}
			
		switch (num)
			{
			
			case 1:
				
			  while ( document.addlink.subcat.length > 0 )
			  	{
				document.addlink.subcat.remove(0);
				}						
				
			  for ( x in cat1 )
				{
				document.addlink.subcat.options[x] = new Option(cat1[x],cat1[x]);
				}
			  break
			
			case 2:
				
			  while ( document.addlink.subcat.length > 0 )
			  	{
				document.addlink.subcat.remove(0);
				}						
				
			  for ( x in cat2 )
				{
				document.addlink.subcat.options[x] = new Option(cat2[x],cat2[x]);
				}
			  break
			
			case 3:
				
			  while ( document.addlink.subcat.length > 0 )
			  	{
				document.addlink.subcat.remove(0);
				}						
				
			  for ( x in cat3 )
				{
				document.addlink.subcat.options[x] = new Option(cat3[x],cat3[x]);
				}
			  break
			
			case 4:
				
			  while ( document.addlink.subcat.length > 0 )
			  	{
				document.addlink.subcat.remove(0);
				}						
				
			  for ( x in cat4 )
				{
				document.addlink.subcat.options[x] = new Option(cat4[x],cat4[x]);
				}
			  break
			
			case 5:
				
			  while ( document.addlink.subcat.length > 0 )
			  	{
				document.addlink.subcat.remove(0);
				}						
				
			  for ( x in cat5 )
				{
				document.addlink.subcat.options[x] = new Option(cat5[x],cat5[x]);
				}
			  break
			
			case 6:
				
			  while ( document.addlink.subcat.length > 0 )
			  	{
				document.addlink.subcat.remove(0);
				}						
				
			  for ( x in cat6 )
				{
				document.addlink.subcat.options[x] = new Option(cat6[x],cat6[x]);
				}
			  break
			
			case 7:
				
			  while ( document.addlink.subcat.length > 0 )
			  	{
				document.addlink.subcat.remove(0);
				}						
				
			  for ( x in cat7 )
				{
				document.addlink.subcat.options[x] = new Option(cat7[x],cat7[x]);
				}
			  break
			
			case 8:
				
			  while ( document.addlink.subcat.length > 0 )
			  	{
				document.addlink.subcat.remove(0);
				}						
				
			  for ( x in cat8 )
				{
				document.addlink.subcat.options[x] = new Option(cat8[x],cat8[x]);
				}
			  break
			
			case 9:
				
			  while ( document.addlink.subcat.length > 0 )
			  	{
				document.addlink.subcat.remove(0);
				}						
				
			  for ( x in cat9 )
				{
				document.addlink.subcat.options[x] = new Option(cat9[x],cat9[x]);
				}
			  break
			
			case 10:
				
			  while ( document.addlink.subcat.length > 0 )
			  	{
				document.addlink.subcat.remove(0);
				}						
				
			  for ( x in cat10 )
				{
				document.addlink.subcat.options[x] = new Option(cat10[x],cat10[x]);
				}
			  break
			
			}
		
		}
		
		
function vselect(frm)
	{
	if ( document.addlink.category.selectedIndex == 0 )
		{
		alert("Please Select a Category");
		}
	else
		{
		document.addlink.submit();
		}
	}


-->
</script>

</head>

<body>
<form name="addlink" action="addlink.asp" method="post" enctype="multipart/form-data">
<p><select name="category" onChange="subcatadd();">
						<option value="no_select">Please Select</option>
						
											<option value="Property News">Property News</option>

						
											<option value="Mortgage advisors">Mortgage advisors</option>
						
											<option value="Financial Help">Financial Help</option>
						
											<option value="Free Debt advice">Free Debt advice</option>
						
											<option value="Property Abroad">Property Abroad</option>
						
											<option value="Utility Services">Utility Services</option>
						
											<option value="DIY">DIY</option>

						
											<option value="Interior Design">Interior Design</option>
						
											<option value="Insurance">Insurance</option>
						
						</select></p><br />
<p><select name="subcat" id="subcategory">
							<option value="no_select">Please Select</option>

						</select></p>
						</form>

</body>
</html>

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)