January 13, 2002 - Non-Persistent Related Menus
January 13, 2002 Non-Persistent Related Menus Tips: January 2002
Yehuda Shiran, Ph.D.
|
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>