Uncle Jim's Web Designs
JavaScript Examples
Dual Dropdown List
This script dynamically replaces the dropdown list with sub-categories, depending upon the selection.
Options set here: rows = 9, cols = 35, size = 1, custom headers
Options set here: rows = 5, cols = 30, size = 5, default headers
INSTALLATION INSTRUCTIONS
COPY
-
Insert Between Head Tags: <HEAD></HEAD>
<SCRIPT LANGUAGE="JavaScript"> // This script coutesy of // Uncle jim's Web Designs // www.JDStiles.com <!-- Begin window.onerror = errorHandler; function errorHandler(e,f,l){ alert("Error in file: " + f + ", line: " +l+"\n\t" + e); return true; } function DURPM(text,value,parent){ this.parent = parent; this.children = new Array(); this.text = text; this.value = value; this.header = "Please make a selection:"; // default this.addChild = addChild; this.relate = relate; this.loadSelection = loadSelection; this.back = back; this.jmp = jmp; this.write = write; if(typeof(parent)=="undefined"){ this.parent = null; DURPMArray.current = DURPMArray[this.value] = this; } } function addChild(text, value){ return (this.children[this.children.length] = new DURPM(text, value, this)); } function relate(menu){ var index = menu.selectedIndex-1; // remove header if(this.parent!=null) index--; if(index==-1) this.back(menu); else if(index > -1) if(this.children[index].children.length > 0) this.children[index].loadSelection(menu); else this.jmp(index); } function loadSelection(menu){ if(menu==null){ menu = document.forms[this.text][this.value]; menu.durpm = this; } for(var i = menu.options.length; i > 0; i--) menu.options[i-1] = null; menu.options[0] = new Option(this.header, null, true, true); if(this.parent!=null) menu.options[1] = new Option("BACK", null); offset = menu.options.length; for(var i = 0; i < this.children.length; i++) menu.options[i+offset] = new Option(this.children[i].text, this.children[i].text); menu.durpm = this; } function back(menu){ this.parent.loadSelection(menu); } function jmp(index){ // alert("You would have been taken to : " + this.children[index].value + " but this is just a demo!"); location.href = this.children[index].value; // optional redirect for navigation return true; } function write(rows, cols, size){ document.writeln("<select name=\""+this.value+"\" size=\""+size+"\" onChange=\"this.durpm.relate(this);\">"); for(var i = 0; i < rows-1; i++) document.writeln("<option> </option>"); document.write("<option>"); for(var i = 0; i < cols; i++) document.write("="); document.writeln("</option>"); document.writeln("</select>"); } function main(){ for(var durpm in DURPMArray) if(typeof(DURPMArray[durpm])=="object") DURPMArray[durpm].loadSelection(null); } function addCat(text){ DURPMArray.current = DURPMArray.current.addChild(text); } function endCat(){ if(DURPMArray.current.parent!=null) DURPMArray.current = DURPMArray.current.parent; } function addItem(text, value){ DURPMArray.current.addChild(text, value); } function addHeader(text){ DURPMArray.current.header = text; } var v = (typeof(Option)!="undefined"); var DURPMArray = new Array(); if(v){ new DURPM("form1","foo"); addHeader("Please choose a subject:"); addCat("JavaScripts","/java/"); addHeader("Please choose a topic:"); addCat("Examples"); addHeader("Please choose a subtopic:"); addItem("navigation","java/navigation.html"); addItem("Forms","java/forms.html"); addItem("Utilities","java/utilities.html"); addItem("Page Effects","java/effects.html"); addItem("Games","java/games.html"); endCat(); addCat("Designs"); addHeader("Please choose a subtopic:"); addItem("Dark","chrome.html"); addItem("Light","/blue.html"); addItem("Mouse Overs","/copper.html"); addItem("Image Maps","/jds.html"); endCat(); addCat("DHTML"); addHeader("Please choose a subtopic:"); addItem("Forms","/java/forms.html"); addItem("Effects","/java/effects.html"); addItem("menus","/java/navigation/"); addItem("All","/framzid16.html"); endCat(); addCat("E-Commerce"); addHeader("Please choose a subtopic:"); addItem("About","index.html"); addItem("Archive","index.html"); addItem("Links","index.html"); endCat(); addCat("Graphics"); addHeader("Please choose a subtopic:"); addItem("Bio","index.html"); addItem("Column1","index.html"); addItem("Column2","index.html"); addItem("Column3","index.html"); endCat(); addCat("HTML"); addHeader("Please choose a subtopic:"); addItem("About","/"); addItem("What's New","/"); addItem("Tutorials","/"); addItem("Style Watch","/"); endCat(); addCat("JavaScript"); addHeader("Please choose a subtopic:"); addItem("About","/"); addItem("Jx Pharmacy","/"); addItem("Column1","/"); addItem("Column2","/"); addItem("Column3","/"); endCat(); endCat(); addCat("Contents"); addHeader("Please choose a topic:"); addCat("Authoring"); addHeader("Please choose a subtopic:"); addItem("Collections","/"); addItem("Design","/"); addItem("FAQs","/"); addItem("Graphics","/"); addItem("Languages","/"); addItem("Organizations","/"); addItem("Programming","/"); addItem("Site Management","/"); addItem("Style","/"); addItem("Tutorials","/"); endCat(); addCat("Internet"); addHeader("Please choose a subtopic:"); addItem("Collections","/"); addItem("Conferences","/"); addItem("Discussion","/"); addItem("FAQs","/"); addItem("Formats","/"); addItem("Glossaries","/"); addItem("History","/"); addItem("Intranet","/"); addItem("Jobs","/"); endCat(); endCat(); endCat(); new DURPM(1,"bar"); addHeader("Please choose a category."); addCat("Navigation"); addItem("Tips Menu","java/tipsmenu.html"); addItem("Rollover","java/lrollover.html"); addItem("Double Combo","java/doublecombo.html"); addItem("Home Page","java/homepage.html"); addItem("Jordan","java/pjordan.html"); endCat(); addCat("Effects"); addItem("Cell Colors","java/tdbg.html"); addItem("Drop Window","java/dropwindow.html"); addItem("Expand Image","java/expandimage.html"); addItem("Scrollit","java/scrollit.html"); addItem("DIV Layers","java/divlayer.html"); addItem("Letter Spacing","java/letterspacing.html"); endCat(); addCat("Forms"); addItem("Page Layers","java/pagelayers.html"); addItem("Top Banner","java/topbanner.html"); addItem("AutoExec","java/autoexec.html"); addItem("Text Change","java/textcolorchange.html"); addItem("Window Positioning","java/windowposition.html"); endCat(); addCat("Utilities"); addItem("Send Page","java/sendthispage.html"); addItem("Page Maker","java/pagemaker.html"); addItem("Elect Mail","java/electmail.html"); endCat(); endCat(); } // End --> </script>
COPY
-
Insert Inside Body: <BODY></BODY>
<form name="form1"> <script> <!-- if(v)DURPMArray["foo"].write(9,35,1); //--> </script> </form> </td></tr> <tr><td> </td></tr> <tr><td align="center">Options set here: rows = 5, cols = 30, size = 5, default headers</td></tr> <tr><td align="center"> <form> <script> <!-- if(v)DURPMArray["bar"].write(7,30,5); //--> </script></form></td></tr></table>
COPY
-
Insert into Body Tag: <BODY 'CODE HERE'>
OnLoad="main()"
Close This Window