January 13, 2002 - Non-Persistent Related Menus | WebReference

January 13, 2002 - Non-Persistent Related Menus

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

Yehuda Shiran, Ph.D.
Doc JavaScript

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>