Related Menus

HOME

SCRIPT ARCHIVE

TUTORIALS

SUBMIT A SCRIPT

BOOK STORE

HOME / DATABASE SCRIPTS / RELATIONAL MENU

Designing With JavaScript: Creating Dynamic Web Pages (Web Review Studio Series)
by Nick Heinle

Here is a super script by Nick Heinle from his book, "Designing With JavaScript." This relational pop up menu will let you choose a from custom list in the second pop according to your selection in the first.

Nick has written an excellent tutorial from the standpoint of the Web designer. His scripts are very well documented and are great examples of real-world code. Databases, rollovers, DHTML, and more, all with easy to understand explanations. Click the book cover to purchase "Designing With JavaScript" from Amazon.com.

Place this code in between the HEAD tags in your document:

function makeItem(name, url) {
 this.name = name;
 this.url = url;
 }

function newItem(name, url) {
 itemsIndex++;
 cats[catsIndex][itemsIndex] = new makeItem(name, url);
 cats[catsIndex].length++;
 }

function makeCat(name) {
 this.name = name;
 this.length = 0;
 }

function newCat(name) {
 catsIndex++
 itemsIndex = -1;
 cats[catsIndex] = new makeCat(name);
 }

function gotoPage(item) {
 var url = null;
     if (isNS3 && item > 0) url = cats[catsIndex][item - 1].url;
     if (isIE && m2.listIndex > 0) url = cats[catsIndex][m2.listIndex - 1].url;
     if (url != null) window.location.href = url;
 }

function addHeadings() {
 m1.addItem(catHeading);
     for (var i = 0; i < cats.length; i++) m1.addItem(cats[i].name);
 m1.listIndex = 0;
 m2.addItem(itemHeading);
 m2.listIndex = 0;
 }

var isNS3 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 3);
 var isIE = (navigator.appName == "Microsoft Internet Explorer");
 var cats = new Array();
 var catsIndex = -1;
 var itemsIndex = -1;

var catHeading = 'Choose A Category';       // heading for category menu
 var itemHeading = 'Choose A Page';          // heading for pages menu
 var betweenHeading = ' then ';              // "in between" text

newCat('Luxury Cars');                      // new category 
 newItem('Euro', 'euro.html');               // pages in category
 newItem('Alvan', 'alvan.html');
 newItem('Gates', 'gates.html');

newCat('Off Road');                         // new category
 newItem('Mountaineer', 'mountaineer.html'); // pages in category
 newItem('Buck', 'buck.html');

newCat('Sports Cars');                      // new category
 newItem('Zippo', 'zippo.html');             // pages in category
 newItem('Flier', 'flier.html');
 newItem('Maven', 'maven.html');
 newItem('Zoom', 'zoom.html');
 </SCRIPT>

Sub m1_Change()
 call relateItems
 End Sub

Sub m2_Change()
 call gotoPage
 End Sub

Sub Window_onLoad() 
 call addHeadings
 End Sub

</SCRIPT>

Then put this code in the BODY where you want the pop up options to appear:

if (isNS3) {
     document.write('<FORM NAME = "m">');
     document.write('<SELECT NAME = "m1" onChange = "relateItems(this.selectedIndex)">');
     document.write('<OPTION>' + catHeading + '</OPTION>');
         for (var i = 0; i < cats.length; i++) document.write('<OPTION>' + cats[i].name + '</OPTION>');
     document.write('</SELECT>' + betweenHeading);
     document.write('<SELECT NAME = "m2" onChange = "gotoPage(this.selectedIndex)">');
     document.write('<OPTION>' + itemHeading + '</OPTION>');
         for (var i = 0; i < 10; i++) document.write('<OPTION></OPTION>');
     document.write('</SELECT></FORM>');
         for (var i = document.m.m2.options.length; i > 0; i--) document.m.m2.options[i] = null;
     }
  
     else if (isIE) {
     document.write('<OBJECT ID = "m1" WIDTH = "221" HEIGHT = "24" CLASSID = "CLSID:8BD21D30-EC42-11CE-9E0D-00AA006002F3">');
     document.write('<PARAM NAME = "VariousPropertyBits" VALUE = "746604571">');
     document.write('<PARAM NAME = "Size" VALUE = "5574;635">');
     document.write('<PARAM NAME = "MatchEntry" VALUE = "1">');
     document.write('<PARAM NAME = "FontCharSet" VALUE = "0">');
     document.write('<PARAM NAME = "FontPitchAndFamily" VALUE = "2">');
     document.write('<PARAM NAME = "DisplayStyle" VALUE = "3">');
     document.write('<PARAM NAME = "ShowDropButtonWhen" VALUE = "2">');
     document.write('</OBJECT>');
     document.write(betweenHeading);
     document.write('<OBJECT ID = "m2" WIDTH = "221" HEIGHT = "24" CLASSID = "CLSID:8BD21D30-EC42-11CE-9E0D-00AA006002F3">');
     document.write('<PARAM NAME = "VariousPropertyBits" VALUE = "746604571">');
     document.write('<PARAM NAME = "Size" VALUE = "5574;635">');
     document.write('<PARAM NAME = "MatchEntry" VALUE = "1">');
     document.write('<PARAM NAME = "FontCharSet" VALUE = "0">');
     document.write('<PARAM NAME = "FontPitchAndFamily" VALUE = "2">');
     document.write('<PARAM NAME = "DisplayStyle" VALUE = "3">');
     document.write('<PARAM NAME = "ShowDropButtonWhen" VALUE = "2">');
     document.write('</OBJECT>');
     }

</SCRIPT>