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>

<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:

• Using Wild Cards to Search for DOMDocument Nodes
• Context-Dependent Pattern Matching
• Restoring Cookies in Persistent Related Menus
• Reading DTDs with JavaScript
• Client-Side vs Server-Side Scripting