联动菜单写法大收集,我看看有多少种！！

Question

三级关联菜单 <FORM name="isc">
<table border="0" cellspacing="0" cellpadding="0">
  <tr align="center"> 
    <td nowrap height="11"> &nbsp;<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected>---Select1-------------</option>
<option>Webmaster Sites</option>
<option>News Sites</option>
</select><select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select2--------------</option>
<option value=" " selected>---Select2--------------</option>
</select><select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select3----------------</option>
<option value=" " selected>---Select3----------------</option>
</select><script>
<!--/*
Triple Combo Script Credit
By Hamid Cheheltani/ Website Abstraction (http://www.wsabstract.com)
Visit http://wsabstract.com for this and over 400+ other scripts
*/var groups=document.isc.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()group[0][0]=new Option("---Select2---"," ");group[1][0]=new Option("Now Select This One"," ");
group[1][1]=new Option("JavaScript","47");
group[1][2]=new Option("DHTML","46");
group[1][3]=new Option("CGI","45");group[2][0]=new Option("Now Select This One"," ");
group[2][1]=new Option("General News","115");
group[2][2]=new Option("Technology News","116"); var temp=document.isc.stage2
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
redirect1(0)
}var secondGroups=document.isc.stage2.options.length
var secondGroup=new Array(groups)
for (i=0; i<groups; i++)  {
secondGroup[i]=new Array(group[i].length)
for (j=0; j<group[i].length; j++)  {
secondGroup[i][j]=new Array()  }}secondGroup[0][0][0]=new Option("---Select 3---"," ");
secondGroup[1][0][0]=new Option("---Select 3---"," ");
secondGroup[1][1][0]=new Option("Now Select This One"," ");
secondGroup[1][1][1]=new Option("Website Abstraction","http://wsabstract.com");
secondGroup[1][1][2]=new Option("JavaScript for the non programmer","http://webteacher.com/javascript/");
secondGroup[1][1][3]=new Option("Java-Scripts.net","http://java-scripts.net");secondGroup[1][2][0]=new Option("Now Select This One"," ");
secondGroup[1][2][1]=new Option("Dynamic Drive","http://www.dynamicdrive.com");
secondGroup[1][2][2]=new Option("Beginner\'s Guide to DHTML","http://www.geocities.com/ResearchTriangle/Facility/4490/");
secondGroup[1][2][3]=new Option("Web Coder","http://webcoder.com/");secondGroup[1][3][0]=new Option("Now Select This One"," ");
secondGroup[1][3][1]=new Option("CGI Resources","http://www.cgi-resources.com");
secondGroup[1][3][2]=new Option("Ada\'s Intro to CGI","http://adashimar.hypermart.net/");secondGroup[2][0][0]=new Option("---Select 3---"," ");
secondGroup[2][1][0]=new Option("Now Select This One"," ");
secondGroup[2][1][1]=new Option("CNN","http://www.cnn.com");
secondGroup[2][1][2]=new Option("MSNBC","http://www.msnbc.com");
secondGroup[2][1][3]=new Option("ABC News","http://www.abcnews.com");secondGroup[2][2][0]=new Option("Now Select A Page"," ");
secondGroup[2][2][1]=new Option("News.com","http://www.news.com");
secondGroup[2][2][2]=new Option("Wired","http://www.wired.com");var temp1=document.isc.stage3
function redirect1(y){
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){
temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value)
}
temp1.options[0].selected=true
}function redirect2(z){
window.location=temp1[z].value
}//-->
</script> </td>
  </tr>
</table>
</FORM><p><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://wsabstract.com">Website
Abstraction</a></font></p>

Answer 1

双选择关联菜单<form name="doublecombo">
<p>
<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>国外JavaScript技术网站</option>
<option>国内JavaScript技术网站</option>
<option>国外的著名搜索引擎</option>
</select>
<select name="stage2" size="1">
<option value="http://wsabstract.com">Website Abstraction</option>
<option value="http://www.dynamicdrive.com">Dynamicdrive.com</option>
<option value="http://javascript.internet.com">JavaScript</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()">
</p>
<script>
<!--
/*
  Double Combo Script Credit
  By Website Abstraction (www.wsabstract.com)
  Over 200+ free JavaScripts here!
  */
var groups=document.doublecombo.example.options.length
  var group=new Array(groups)
  for (i=0; i<groups; i++)
  group[i]=new Array()
group[0][0]=new Option("Website Abstraction","http://wsabstract.com")
  group[0][1]=new Option("Dynamicdrive.com","http://www.dynamicdrive.com")
  group[0][2]=new Option("JavaScript","http://javascript.internet.com")
group[1][0]=new Option("万旭JavaScript仓库","http://www.wanxu.com")
  group[1][1]=new Option("JavaScript2000","http://www.javascript2000.com")
  group[1][2]=new Option("无忧脚本","http://www.51js.com")
group[2][0]=new Option("Hotbot","http://www.hotbot.com")
  group[2][1]=new Option("Infoseek","http://www.infoseek.com")
  group[2][2]=new Option("Excite","http://www.excite.com")
  group[2][3]=new Option("Lycos","http://www.lycos.com")
var temp=document.doublecombo.stage2
function redirect(x){
  for (m=temp.options.length-1;m>0;m--)
  temp.options[m]=null
  for (i=0;i<group[x].length;i++){
  temp.options[i]=new Option(group[x][i].text,group[x][i].value)
  }
  temp.options[0].selected=true
  }
function go(){
  location=temp.options[temp.selectedIndex].value
  }
  //-->
  </script>
  </form>

Answer 2

从数据库中读取记录的动态列表（有初始值） 
这里是以省份和城市为例，由于用到数据库，请先建立数据库dlist.mdb数据库名称：dlist.mdb
省份表名称：Province
字段有：p_id(类型:自动编号),p_name(类型：文本,省份名称）城市表名称：City
字段有：c_id(类型:自动编号),c_pid(类型:文本,省份名称，等于Province表中的p_name）,c_name(类型：文本，城市名称）
源程序如下，保存为ASP文件即可执行。
------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS动态列表示例</title>
<script language="JavaScript"><!--
<%
dim conn,rs,grs,i,j,pstr,sstr
set conn=server.createobject("adodb.connection")
set rs=server.createobject("adodb.recordset")
set grs=server.createobject("adodb.recordset")
conn.open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.mappath("dlist.mdb")
'写省份JS数组
rs.open "select * from province;",conn,1,1
pstr="var pstr=new Array("
for i=0 to rs.recordcount-1
 if i<>rs.recordcount-1 then
  pstr=pstr & "'" & rs("p_name") & "',"
 else
  pstr=pstr & "'" & rs("p_name") & "'"
 end if
 getsub(rs("p_name"))
 rs.movenext
next
pstr=pstr & ");"
response.write pstr & vbcrlf
rs.close()
set rs=nothing
set grs=nothing'根据省份写城市JS数组的过程
sub getsub(pname)
 grs.open "select * from city where c_pid='" & pname & "';",conn,1,1
 sstr="var sstr" & i & "=new Array("
 for j=1 to grs.recordcount
  if j<>grs.recordcount then
   sstr=sstr & "'" & grs("c_name") & "',"
  else
   sstr=sstr & "'" & grs("c_name") & "'"
  end if
  grs.movenext
 next
 grs.close()
 sstr=sstr & ");"
 response.write sstr & vbcrlf
end sub
%>//添加列表项目
//参数说明：FrmName-表单名、sName-要添加的列表名、sText-列表项显示的文本、sValue-列表项的值
function addOption(FrmName, sName, sText, sValue) {
  var def = true;
  var sel = true;
  var optionName = new Option(sText, sValue, def, sel);
  var length = FrmName[sName].length;
  FrmName[sName].options[length] = optionName;
  FrmName[sName].options[length].selected = false;
}//删除列表项目
//参数说明：FrmName-表单名、sName-要删除的列表名、force-是否删除原来的项目(True删除，False保留)
function delOptions(FrmName, sName, force) {
  var length = FrmName[sName].options.length;
  for (var i=0; i<FrmName[sName].options.length; i++) {
    if (FrmName[sName].options[i].selected || force) {
      FrmName[sName].options[i] = null;
      length--;
      i--;
    }
  }
}//获得要添加列表项目的数组;
//参数说明：what-要获得选定值的列表
function getArrayValue(what) {
   return eval(what.options[what.options.selectedIndex].value); 
}//根据当前选定值，添加列表项目
//参数说明：FrmName-表单名、sName1-要获取选定值的列表名、sName2-要动态加载的列表名
function updateOptions(FrmName, sName1, sName2) {
  delOptions(FrmName,sName2,true);
  var ArrayValue=getArrayValue(FrmName[sName1]);
  for (var i=0; i<ArrayValue.length;i+=1) {
    addOption(FrmName,sName2,ArrayValue[i],'sstr'+i);
  }
  FrmName[sName2].options.selectedIndex =0;//设置默认显示的列表项目
}function GetValue(k){
  alert(k);
}//--></script>
</head><body onLoad="updateOptions(frmdlist, 'lsti', 'lstb');updateOptions(frmdlist, 'lstb', 'lsts')">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<form action="" method="post" name="frmdlist" id="frmdlist">
  <table width="408" border="0" align="center" cellpadding="2" cellspacing="2">
    <tr>
      <td width="400">JS动态列表示例<select name="lsti" style="display:none"><option value="pstr">pstr</select></td>
    </tr>
    <tr>
      <td><select style="width:200" name="lstb" id="lstb" onChange="updateOptions(this.form, 'lstb', 'lsts')">
      </select>
      <input type="button" name="Submit2" value="GetValue" onClick="GetValue(document.frmdlist.lstb.value)"></td>
    </tr>
    <tr>
      <td><select style="width:200" name="lsts" id="lsts">
      </select>
      <input type="button" name="Submit" value="GetValue" onClick="GetValue(document.frmdlist.lsts.value)"></td>
    </tr>
  </table>
</form>
</body>
</html>