用JavaScript创建关联菜单

用JavaScript创建关联菜单

用JavaScript做一个关联菜单，使右边下拉菜单的内容随着左边的选项的改变而改变。源程序如下，我仔细一一分析：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>menu</title>
<SCRIPT language=JavaScript>
//此段可用其他内容替代，暂时用一个9X9乘法表的二维数组来填充

  var dataArray = new Array(9);        // 产生乘法表的外壳?
    for (var j = 0; j < dataArray.length; j++)// 准备用行进行填充。
  {
     var aRow = new Array(9);       // 创建一行。
       for (var i = 0; i < aRow.length; i++)// 准备填充这一行。
{
        aRow[i] = (i + " times " + j + " = " + i*j); // 计算并存储值。
        }
dataArray[j] = aRow;              // 将已填充的行放入表中。

   }
var xbound=9;
var ybound=9;
function fill(SelectCtrl, itemArray)      //填充下拉单
{
var i;
for (i = SelectCtrl.options.length; i >= 0; i--) {   //清空选项
   SelectCtrl.options[i] = null; }
if (itemArray != null)
{
   for (i = 0; i < itemArray.length; i++)
     {
     SelectCtrl.options[i] = new Option(itemArray[i]); //创建选项对象
     if (itemArray[i] != null)
      SelectCtrl.options[i].value = itemArray[i];   // 给选项赋值
     }
}
  SelectCtrl.options[0].selected = true;          //让第一个选项成为默认选项
}

function fillMain(SelectCtrl)                 // 填充主下拉单
{var i;
   mainArray= new Array(ybound);
mainArray[0]="Please select!"             //创建一个一维数组，用以装二维数组     for (i=0;i < ybound;i++)               //的首列值
   mainArray[i+1]=dataArray[i][0];
    fill(SelectCtrl, mainArray);
  }

function fillSub(SelectCtrl,index)              //填充子下拉单
{var i;
if (index<0)                         //当index<0时创建一个
{ subArray= new Array(2);
   subArray[0]="<--------->";                 //只含有二个元素的数组
subArray[1]="";
}
else
{
  subArray= new Array(xbound-1);
  for(i=0;i < xbound-1;i++)
  subArray[i]=dataArray[index][i+1];              //用二维数组的其他列元素
  }                              //填充新创建的一维数组
fill(SelectCtrl,subArray);

}
</script>
</head>

<body onLoad="fillMain(document.form1.MainMenu );">
<FORM name=form1 >
      
      <DIV align=center><SELECT size=1
      onchange="fillSub(this.form.SubMenu, this.selectedIndex-1);"
      name=MainMenu> <option></option><option></option>
       </SELECT> <SELECT
       size=1 name=SubMenu> <option><--------------></option><option></option></SELECT>
      </DIV></FORM>

</body>
</html>