Connected Javascript Menus - 4 deep...

waidc · Jun 22, 2005

Hi all, I'm hoping someone can help with this one...

I need a javascript dropdown box menu which is four levels deep, for example:

TEACHER >> SUBJECT >> TOPIC >> INFORMATION

The boxes have to be connected, so that if teacher1 only teaches English, something like Mathematics won't appear under Subject for that teacher.

I've seen examples of this three deep but have not been able to work out how to make it four levels.

Also, if possible, I need the final box to redirect to a webpage with the name of all the menus, for example:

teacher1 >> english >> poetry >> history

would redirect to a page called

teacher1englishpoetryhistory.html

Again, I have seen an example of this (at javascript source) but do not know how to incorporate it into the connected menu scenario above.

I would be very grateful for any help with this

BabyJeffy · Jun 22, 2005

I have created a solution for you in the code below. This is a 'stand-alone' 4 level deep select combo... which is really simple to extend (should you ever need to). I developed it and tested it in Safari... but fully expect it to work in your browser.

The data is stored in arrays... and I have tried to make the array structure something you can easily get to grips with. I suggest you create a .js file with the actual array definitions and the data... and just link it into the page. This is basically a Javascript representation of a database.

Finally... the code alerts each of the 4 selected values and then the code that you would use to redirect.

Code:

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test</title>
<script type="text/javascript">
<!--
var _array1 = new Array(); // teachers
var _array2 = new Array(); // subjects
var _array3 = new Array(); // topics

/* teachers */
_array1['teacher1'] = {
	_list:[ 
	{ _name:'Maths',_value:'maths' },
	{ _name:'English',_value:'english' }
	]
};
_array1['teacher2'] = {
	_list:[ 
	{ _name:'Spanish',_value:'spanish' },
	{ _name:'English',_value:'english' }
	]
};
_array1['teacher3'] = {
	_list:[ 
	{ _name:'Maths',_value:'maths' },
	{ _name:'PhysEd',_value:'physed' }
	]
};

/* math */
_array2['maths'] = {
	_list:[ 
	{ _name:'Math Topic One',_value:'mathstopic1' },
	{ _name:'Math Topic Two',_value:'mathstopic2' }
	]
};
_array3['mathstopic1'] = {
	_list:[ 
	{ _name:'Math Topic 1 Info One',_value:'math1infotopic1' },
	{ _name:'Math Topic 1 Info Two',_value:'math1infotopic2' }
	]
};
_array3['mathstopic2'] = {
	_list:[ 
	{ _name:'Math Topic 2 Info One',_value:'math2infotopic1' },
	{ _name:'Math Topic 2 Info Two',_value:'math2infotopic2' }
	]
};

/* english */
_array2['english'] = {
	_list:[ 
	{ _name:'English Topic One',_value:'englishtopic1' },
	{ _name:'English Topic Two',_value:'englishtopic2' }
	]
};
_array3['englishtopic1'] = {
	_list:[ 
	{ _name:'English Topic 1 Info One',_value:'english1infotopic1' },
	{ _name:'English Topic 1 Info Two',_value:'english1infotopic2' }
	]
};
_array3['englishtopic2'] = {
	_list:[ 
	{ _name:'English Topic 2 Info One',_value:'english2infotopic1' },
	{ _name:'English Topic 2 Info Two',_value:'english2infotopic2' }
	]
};

/* spanish */
_array2['spanish'] = {
	_list:[ 
	{ _name:'Spanish Topic One',_value:'spanishtopic1' },
	{ _name:'Spanish Topic Two',_value:'spanishtopic2' }
	]
};
_array3['spanishtopic1'] = {
	_list:[ 
	{ _name:'Spanish Topic 1 Info One',_value:'spanish1infotopic1' },
	{ _name:'Spanish Topic 1 Info Two',_value:'spanish1infotopic2' }
	]
};
_array3['spanishtopic2'] = {
	_list:[ 
	{ _name:'Spanish Topic 2 Info One',_value:'spanish2infotopic1' },
	{ _name:'Spanish Topic 2 Info Two',_value:'spanish2infotopic2' }
	]
};

/* physed */
_array2['physed'] = {
	_list:[ 
	{ _name:'PhysEd Topic One',_value:'physedtopic1' },
	{ _name:'PhysEd Topic Two',_value:'physedtopic2' }
	]
};
_array3['physedtopic1'] = {
	_list:[ 
	{ _name:'PhysEd Topic 1 Info One',_value:'physed1infotopic1' },
	{ _name:'PhysEd Topic 1 Info Two',_value:'physed1infotopic2' }
	]
};
_array3['physedtopic2'] = {
	_list:[ 
	{ _name:'PhysEd Topic 2 Info One',_value:'physed2infotopic1' },
	{ _name:'PhysEd Topic 2 Info Two',_value:'physed2infotopic2' }
	]
};

function populate(_this,_data) {
	var _maxDepth = 4; // the number of drop down levels
	var myArrayKey = _this.value;
	var objToPopulate = document.getElementById('dropDown'+(parseInt(_data,10)+1));
	var arrayToQuery = window['_array'+_data];
	// clear out the drop down selects below this level
	for (var loop=parseInt(_data,10)+1; loop<=_maxDepth; loop++) {
		document.getElementById('dropDown'+loop).options.length = 1;
	}
	// populate the next level down
	for (var loop=0; loop < arrayToQuery[myArrayKey]._list.length; loop++) {
		var _myArray = arrayToQuery[myArrayKey]._list[loop];
		objToPopulate.add(new Option(_myArray._name, _myArray._value));
	}
}

function visit() {
	var _teacherObj = document.getElementById('dropDown1');
	var _subjectObj = document.getElementById('dropDown2');
	var _topicObj = document.getElementById('dropDown3');
	var _infoObj = document.getElementById('dropDown4');

	var _teacher = _teacherObj[_teacherObj.selectedIndex].value;
	var _subject = _subjectObj[_subjectObj.selectedIndex].value;
	var _topic = _topicObj[_topicObj.selectedIndex].value;
	var _info = _infoObj[_infoObj.selectedIndex].value;

	var _url = _teacher + _subject + _topic + _info;
//	this.location = _url;
	alert('Teacher: ' + _teacher + '\nSubject: ' + _subject + '\nTopic: ' + _topic + '\nInformation: ' + _info);
	alert("this.location='" + _url + "';");
}
//-->
</script>
</head>
<body>
<form name="myForm">

<div>Teacher: <select id="dropDown1" onchange="populate(this,1)">
<option value="">Select a teacher...</option>
<option value="teacher1">Teacher 1</option>
<option value="teacher2">Teacher 2</option>
<option value="teacher3">Teacher 3</option>
</select>
</div>

<div>Subject: <select id="dropDown2" onchange="populate(this,2)">
<option value="">Select a subject...</option>
</select>
</div>

<div>Topic: <select id="dropDown3" onchange="populate(this,3)">
<option value="">Select a topic...</option>
</select>
</div>

<div>Topic: <select id="dropDown4" onchange="visit()">
<option value="">Select some information...</option>
</select>
</div>

</form>
</body>
</html>

Here's hoping this is going to be of use to you

Cheers,
Jeff

waidc · Jun 22, 2005

WOW!!! Jeff, what can I say - that's perfect! Exactly what I wanted it to do, and so quickly too!!

Many thanks, this has saved hours of going around in circles not really knowing how to facilitate it.

Your blood's worth bottling!!! Thanks again

- NB, where you suggest creating a .js file, would that mean copying and pasting everything between the 'script language' and 'script' tags into a new file with a .js extension and referencing it in the <head> tags? cheers

BabyJeffy · Jun 22, 2005

I would take everything from the line:

Code:

var _array1 = new Array(); // teachers

Through to the end of the array definitions (basically all the array data) and put that into an external .js file. If you saved this file as myData.js in the same directory as the html page... you would include it (in your <head> section as:

Code:

<script src="myData.js" type="text/javascript"></script>

And you would put this before the <script>...</script> tags on the actual html page (so everything loads in the correct order).

Hope this makes sense... I'll check back later and see how you got on [smile]

Cheers,
Jeff

waidc · Jun 23, 2005

Fantastic Jeff, works a treat. Thank you again for all your help with this

cheers

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Connected Javascript Menus - 4 deep...

waidc

Technical User

BabyJeffy

Programmer

waidc

Technical User

BabyJeffy

Programmer

waidc

Technical User

Similar threads

Part and Inventory Search

Sponsor