3-level dropdown box help - assigning a value?

stfc_boy · 06-17-2009, 06:31 PM

Hi,

I’d appreciate some help with a 3-level dropdown box:

http://www.inspireaway.co.uk/combo_dropdown/

Now in this dropdown menu if you select:

Category > Cars
Sub category Cars for Sale
Sub Sub Category Ibiza

What I want to do is two things:

1) Place a value on all the Sub Sub Category(ies) so for example the value of Ibiza I want to = 55
2) Then Grab that value? How would I get that value and grab it from POST?

Thanks

jmrker · 06-18-2009, 12:05 AM

This is not your example, but one I modified for someone else.
It performs a similar function to your needs and you just need to change labels.

Note the |xxxVALUE entries displayed when 3 choices have been made
and the "Selections" button is clicked. Substitute your values there.

Post back if you continue to have difficulties.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Multi-Selectbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
// Modified from: http://www.codingforums.com/showthread.php?t=164733

	var categories = [];   // Option Text|Option Value; 
	categories['Kids'] = ['Birthday|Birthday','Christmas|Christmas'];
	categories['Adults'] = ['Birthday|Birthday','Christmas|Christmas','Corporate|Corporate'];
	categories['Mixed'] = ['Birthday|Birthday','Christmas|Christmas','Corporate|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(currCat,currList,step){

		for (i=step; i<dynList.length; i++) {
			 document.forms[0][dynList[i]].length = 1;
			 document.forms[0][dynList[i]].selectedIndex = 0;
			}
		var nCategory = categories[currCat];
		for (each in nCategory)	{
			 var nOption = document.createElement('option'); 
			 var nInfo = nCategory[each].split("|");
			 nOption.setAttribute('value',nInfo[1]); 
			 nOption.appendChild(document.createTextNode(nInfo[0])); 
			 currList.appendChild(nOption); 
			} 
	}
	
function CurrentSelections() {
  var str = '';
  str += document.forms[0].ageGroup.value+'\n';
  str += document.forms[0].partyType.value+'\n';
  str += document.forms[0].theme.value+'\n';
  alert(str);	
}

</script>
</head>
	<body>
		<form method="post" action="">

			<select name="ageGroup" onchange="fillSelect(this.value,this.form['partyType'],0)">
				<option value="">- Age Group -</option>

				<option value="Kids">Kids (up to 21)</option>
				<option value="Adults">Adults (21 and up)</option>
				<option value="Mixed">Kids and Adults</option>
			</select>
			
			<select name="partyType" size="1" onchange="fillSelect(this.value,this.form['theme'],1)">
				<option value="">- Party Type -</option>
			</select>

			<select name="theme">
				<option value="">- Party Theme -</option>
			</select>
<button onClick="CurrentSelections();return false">Selections</button>
		</form>
	</body>
</html>

Good Luck!