
	ASP Shopping Cart, Forum & BBS - all for $20 from CodeToad Plus!

Home || ASP | ASP.Net | C++/C# | DHTML | HTML | Java | Javascript | Perl | VB | XML || CodeToad Plus! || RAM

Search Site:

Home » Javascript » Article

Interactive Conditional Menus

Article by:

Jeff Anderson ( 1362 ) (5/3/2002)

	Add to Favourites
	Tell a friend

Summary:

Interactive, conditional Javascript menus. The user makes choices in one select menu which then populates the choices in the second menu.

Viewed: 22702 times

Rating (1 vote):

5 out of 5

Rate this Article

Read Comments

Post Comments

Interactive Conditional Menus

Live Demo

This script will allow you to create multi-level menu choices, without forcing the user to reload the page. First, click here to see how what we're talking about.

We do this by creating two menus - the choice made in the first will interactively determine what appears in the second.

In this example, we'll imagine a web site with code samples in several languages (what a good idea) and the choice in the second menu displays tutorials appropriate to the language selected in the first.

So, first here's the code to create the two menus:

Select All Code


<form name="form1">
<select name="language" onChange="selectLanguage();">
<option selected value="language_name">Select a Language</option>
<option value="javascript">Javascript</option>
<option value="asp">ASP</option>

<select size="3" multiple name="tutorial" onChange="selectTutorial();">
<option selected value="null">No Language Selected</option>
</select>
</form>

When a language is selected in the first menu, the onChange event is called. Now we need to look at the Javascript to see how we will handle this.

First, we need to create some arrays:

Select All Code


arrJavascriptTutorials=new Array();
arrJavascriptTutorials[1]="Form Functions";
arrJavascriptTutorials[2]="Menu Navigation";

arrJavascriptTutorialValue=new Array();
arrJavascriptTutorialValue[1]="/javascript/forms/index.html";
arrJavascriptTutorialValue[2]="/javascript/navigation/index.html";


arrASPTutorials=new Array();
arrASPTutorials[1]="Email";
arrASPTutorials[2]="Applications";

arrASPTutorialValue=new Array();
arrASPTutorialValue[1]="/asp/email/index.html";
arrASPTutorialValue[2]="http://www.codetoad.com/asp/applications/";

Now three functions will complete the script:

Select All Code

function selectLanguage(){
var num=document.form1.language.selectedIndex;
if (num==1){populateTutorial(arrJavascriptTutorials,arrJavascriptTutorialValue);}

if (num==2){populateTutorial(arrASPTutorials,arrASPTutorialValue);}

}



function populateTutorial(thisTutorial,thisValue){
document.form1.tutorial.options[0].text="Select a Tutorial";
for(i=1;i<thistutorial.length document.form1.tutorial.options function var document.location.href="document.form1.tutorial.options[num].value}"></thistutorial.length>

click here to see how it looks in practice.

Useful Links

CodeToad Experts

Can't find the answer?
Our Site experts are answering questions for free in the CodeToad forums

Rate this article: Poor Excellent

View highlighted Comments

User Comments on 'Interactive Conditional Menus'

RELATED ARTICLES
Javascript - Enable and Disable form elements by Jeff Anderson This is a relatively little known and under-used feature of javascript which can be very useful in guiding a user through a form. Using the disabled tag, you can switch on and off elements in a form.

Check IsNumeric Function by Jeff Anderson A javascript validation function to check whether the details entered by a user are numeric.

Javascript Onload Event by Jeff Anderson Sometimes you need to perform an action immediatley after the page has loaded. That's when the onLoad Event Handler comes in handy

Form Validation Function by Jeff Anderson A javascript validation function that you can use to validate all types of forms.

Javascript Get Selected Text by Jeff Anderson A cross-browser script to get text selected by the user

JavaScript Field Is Empty Form Validation by Jeff Anderson This javascript function allows you to check whether a form field has been completed or not.

Check Email Validation Function by Jeff Anderson A javascript validation function to check whether the user has entered a valid email address in a form.

Javascript onUnload Event Handler by Jeff Anderson The onUnload Event Handler allows you to perform an action as the user leaves the page.

Multiple submit buttons on a single form by Kiran Pai This script shows you how to submit the contents of a form to different programs depending on which Submit button you press. Additionally it also shows how to call two different functions when you press the Submit button.

Simple date validation by Chris Hogben function that takes a date in three parts, day, month and year - returns true if it's a valid date.

Recent Forum Threads

•	Run a program both on windows and linux
•	VERO.SurfCAM.v2014
•	Schlumberger.Petrel.V2013.2
•	Petrel.V2013.2
•	Altair.HyperWorks.v12
•	VoluMill.v6.1
•	VoluMill.NEXION.6
•	VERO.SurfCAM.v2014
•	Schlumberger.Petrel.V2013.2

Recent Articles

	ASP GetTempName
	Decode and Encode UTF-8
	ASP GetFile
	ASP FolderExists
	ASP FileExists
	ASP OpenTextFile
	ASP FilesystemObject
	ASP CreateFolder
	ASP CreateTextFile
	Javascript Get Selected Text

privacy - contact - advertise - hot links - link to us - submit your article