spacer
Yehuda Shiran January 13, 2002
Non-Persistent Related Menus
Tips: January 2002

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?

One of the problems of related menus is that once you go off to another Web page and then come back, the menu selections are not persistent. Play around with these related menus:

Write down the entries you see on both menus. Let's assume that the left and right menus are level2 and level23, respectively. Surf now to another Web site of your choice. Hit the browser's Back key. You will see that only the left menu persisted. The right menu's entry will be either level11, level12, or level13. The selected index of the shown option will match the selected index of the option before we left for another Web page. You should get level2 on the left menu, and level13 on the right menu. Tomorrow, we will show you how to overcome this problem using Cookies.

Here is the HTML code:

<FORM NAME="menu">
<SELECT NAME="topics" onChange="relate(this.form)">
<OPTION VALUE="" SELECTED>level1
<OPTION VALUE="">level2
<OPTION VALUE="">level3
</SELECT>

<SELECT NAME="list">
<OPTION VALUE="" SELECTED>level11
<OPTION VALUE="">level12
<OPTION VALUE="">level13
</SELECT>
</FORM>
Here is the JavaScript code:

<SCRIPT LANGUAGE="JavaScript">
<!--

  var ar = new Array();

  ar[0] = new Array();
  ar[0][0] = new makeOption("level11");
  ar[0][1] = new makeOption("level12");
  ar[0][2] = new makeOption("level13");

  ar[1] = new Array();
  ar[1][0] = new makeOption("level21");
  ar[1][1] = new makeOption("level22");
  ar[1][2] = new makeOption("level23");
  
  ar[2] = new Array();
  ar[2][0] = new makeOption("level31");
  ar[2][1] = new makeOption("level32");
  ar[2][2] = new makeOption("level33");
 

function makeOption(text) {
  this.text = text;
}

function relate(form) {
  var options = form.list.options;
  for (var i = options.length - 1; i > 0; i--) {
    options[i] = null;
  }
  var curAr = ar[form.topics.selectedIndex];
  for (var j = 0; j < curAr.length; j++) {
    options[j] = new Option(curAr[j].text);
  }
  options[0].selected = true;
  
}

// -->
</SCRIPT>

People who read this tip also read these tips:

Look for similar tips by subject:

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Creating a Banking Application Deposit Script · Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
XPath Support for Working with XML Data in MySQL · SSDs Take Center Stage · WebPlus X4 Adds New Features for Easy Site Design