现在是一个静态的演示来说明实现的原理：
<script language="javascript" type="text/javascript">
var totalCount=12; //定义数据总数，包括1级2级
//数据结构，是个数组的数组，可以使用开发语言动态产生
dataArray = new Array();
dataArray[0] = new Array("1100","1100","0"); //一级菜单表示为0
dataArray[1] = new Array("1200","1200","0");
dataArray[2] = new Array("1300","1300","0");
dataArray[3] = new Array("1111","0001","1100");
dataArray[4] = new Array("2222","0002","1100");
dataArray[5] = new Array("3333","0003","1100");
dataArray[6] = new Array("4444","4444","1200");
dataArray[7] = new Array("5555","5555","1200");
dataArray[8] = new Array("6666","6666","1200");
dataArray[9] = new Array("7777","7777","1200");
dataArray[10] = new Array("8888","8888","1300");
dataArray[11] = new Array("9999","9999","1300");
//一级菜单改变产生的动作
function select1Change(select1ID)
{
if(select1ID=='select1Text') //如果是选中了一级菜单文字，则显示回二级菜单文字
{
alert("回到2级菜单显示");
document.myform.select2.length = 0;
document.myform.select2.options[0] = new Option("==请选二级分类==","select2Text" );
return false;
}
else //其他情况则显示对应的2级菜单项
{
document.myform.select2.length = 0;
for (var i=0;i < totalCount; i++)
{
if (dataArray[i][2] == select1ID)
{
document.myform.select2.options[document.myform.select2.length]
= new Option(dataArray[i][0], dataArray[i][1]);
}
}
}
}
//二级菜单项目选中产生的动作，这里只是示意性的，没有实际意义
function select2Change(select2ID)
{
alert(select2ID);
}
</script>
<form method="POST" name="myform">
<p>
<select name="select1" onchange="select1Change(document.myform.select1.options[document.myform.select1.selectedIndex].value)">
<option selected value="select1Text">==请选一级分类==</option>
<option value="1100" id="1100">1100</option>
<option value="1200" id="1200">1200</option>
<option value="1300" id="1300">1300</option>
</select>
<select name="select2" onchange="select2Change(document.myform.select2.options[document.myform.select2.selectedIndex].value)">
<option selected value="select2Text">==请选二级分类==</option>
</select> </p>
</form>