2D Related Comboboxes
<HTML>
<HEAD><TITLE>Universal Related Popup Menus / Another Way</TITLE>
<BASE HREF="http://www.java2s.com">
<STYLE>
.saveHistory {behavior:url(#default#savehistory);}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
v=false;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
if (typeof(Option)+"" != "undefined") v=true;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
// Universal Related Select Menus - cascading popdown menus
// by Andrew King. v1.34 19990720
// Copyright (c) 1999 internet.com LLC. All Rights Reserved.
//
// This program is free software; you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation; either version 2 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
//
// Originally published and documented at http://www.webreference.com
// Contact aking@internet.com for all other uses.
//
// Change History
// 3-3-96 code optimized, modularized, and made universal-abk
// 3-8-97 jumpPage1 and 2 consolidated into generalized func
// 3-10-97 changeMenu added jumpPage(0,0), for non-ns3 browsers
// make popup act like a live popup when no related functionality
// 8-5-97 browser detect script changed to check for option functionality
// 9-11-97 aln changed to options.length, as IE 4 does not support
// nulling out options
// 12-22-98 added SIZE att to make select lists, used named forms/elements
// 1-1-99 added getFormNum to fix netscape 2 bug (doesn't support named fms)
// pass formName, elementNum to relate and jmp as workaround
// pass this.form,0 and increment instead of decrement in relate to get
// next form
// assumes menu2 follows menu1 in HTML
// tested in mac ie3.01/ns2.02 (live), ns 3.01,4.05,4.5 and ie4.01 related
// 990204 - adopted a more modular/oo approach using two D arrays, thanks
// to Jacob Berner <leo7278@hotmail.com> for his input
// 990701 - fixed back button bug in ie4+ by resetting all forms onload-abk
// thanks to peter belesis (pbel@internet.com) for this fix
// 990714 - added IE5 persistence - abk pb
// 990715 - went open source, created stripped down example files - abk
// 990720 - jmp() fix getFormNum(formName);->
// var formNum = getFormNum(formName);
// if (v) {..} added around newCat array creation for old browsers
// 990721 - getFormNum/relate tweaks, unnec code removed,
// ns2.0 mac fix - getFormNum returns -1 in nested tables
// new jmp bypasses prob - thx to thanks to Michael Guitton
// saramaca@mail.dotcom.fr
// 990722 - var for scope added, jmp chgd to named form for ns2.02 bug-abk
if(v){a=new Array(22);}
function getFormNum (formName) {
var formNum =-1;
for (i=0;i<document.forms.length;i++){
tempForm = document.forms[i];
if (formName == tempForm) {
formNum = i;
break;
}
}
return formNum;
}
function jmp(form, elt)
// The first parameter is a reference to the form.
{
if (form != null) {
with (form.elements[elt]) {
if (0 <= selectedIndex)
location = options[selectedIndex].value;
}
}
}
var catsIndex = -1;
var itemsIndex;
if (v) { // ns 2 fix
function newCat(){
catsIndex++;
a[catsIndex] = new Array();
itemsIndex = 0;
}
function O(txt,url) {
a[catsIndex][itemsIndex]=new myOptions(txt,url);
itemsIndex++;
}
function myOptions(text,value){
this.text = text;
this.value = value;
}
// fill array
newCat();
O("3-D Animation","/3d/");
O("Design","/dlab/");
O("DHTML","/dhtml/");
O("E-Commerce","/ecommerce/mm/");
O("Graphics","/graphics/");
O("HTML","/html/");
O("JavaScript","/js/");
newCat();
O("Authoring","/authoring/");
O("E-Commerce","/ecommerce/");
O("Internet","/internet/");
O("Multimedia","/multimedia/");
O("Programming","/programming/");
O("Promotion","/promotion/");
newCat();
O("Domains","/services/dns/");
O("Graphics","/services/graphics/");
O("News Harvester","/headlines/nh/");
O("Reference","/services/reference/");
O("Search","/search.cgi");
O("Validation","/services/validation/");
newCat();
O("Awards","/awards.html");
O("In the News","/inthenews.html");
O("New Features","/features.html");
O("Linking Info","/link.html");
O("Lore","/lore.html");
O("Media Kit","http://www.java2s.com/");
O("Press Releases","/press/");
O("Suggest","/cgi-bin/suggest.cgi");
} // if (v)
function relate(formName,elementNum,j) {
if(v){
var formNum = getFormNum(formName);
if (formNum>=0) {
formNum++; // reference next form, assume it follows in HTML
with (document.forms[formNum].elements[elementNum]) {
for(i=options.length-1;i>0;i--) options[i] = null; // null out in reverse order (bug workarnd)
for(i=0;i<a[j].length;i++){
options[i] = new Option(a[j][i].text,a[j][i].value);
}
options[0].selected = true;
}
}
} else {
jmp(formName,elementNum);
}
}
// BACK BUTTON FIX for ie4+- or
// MEMORY-CACHE-STORING-ONLY-INDEX-AND-NOT-CONTENT
//
// from peter belesis:
// IE4+ remembers the index of each SELECT but NOT the CONTENTS of each
// SELECT, so it gets it wrong.
//
// it has to do with MEMORY CACHE (where form input is stored) and how
// IE stores information about SELECT menus.
//
// IE stores the selectedINDEX ONLY of the SELECT menu, not the
// CONTENTS-AT-THE-TIME-OF-SELECTION
//
// when we return to a page, it displays the default contents of each
// SELECT, grabs the stored index from cache and aligns the default
// contents to that index.
//
// Netscape, on the other hand, seems to remember both INDEX and CONTENTS
// added ie5 persistence 990714
function IEsetup(){
if(!document.all) return;
IE5 = navigator.appVersion.indexOf("5.")!=-1;
if(!IE5) {
for (i=0;i<document.forms.length;i++) {
document.forms[i].reset();
}
}
}
window.onload = IEsetup;
//-->
</SCRIPT></HEAD>
<BODY BGCOLOR="#ffffff">
<CENTER>
<TABLE BGCOLOR="#DDCCFF" BORDER="0" CELLPADDING="8" CELLSPACING="0">
<TR VALIGN="TOP"><TD>Choose a subject:<BR><FORM NAME="f1" METHOD="POST" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
<SELECT NAME="m1" ID="m1" CLASS=saveHistory onChange="relate(this.form,0,this.selectedIndex)"><OPTION VALUE="/experts/">Experts<OPTION VALUE="/index2.html">Contents<OPTION VALUE="/services/">Services<OPTION VALUE="/about.html">About</SELECT><INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
</FORM></TD>
<TD BGCOLOR="#FFFFFF" VALIGN=MIDDLE><B>---></B></TD>
<TD>Choose a topic:<BR><FORM NAME="f2" METHOD="POST" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
<SELECT NAME="m2" ID="m2" CLASS=saveHistory onChange="jmp(this.form,0)">
<OPTION VALUE="/3d/">3-D Animation
<OPTION VALUE="/dlab/">Design
<OPTION VALUE="/dhtml/">Dynamic HTML
<OPTION VALUE="/ecommerce/mm/">E-Commerce
<OPTION VALUE="/graphics/">Graphics
<OPTION VALUE="/html/">HTML
<OPTION VALUE="/js/">JavaScript</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
<INPUT TYPE="hidden" NAME="baseurl" VALUE="http://www.java2s.com">
</FORM></TD>
</TR>
</TABLE></CENTER>
</BODY>
</HTML>
Related examples in the same category
