在网上经常看到关于联动菜单的贴子,特将自己的代码贴出来,供大学参与.
一.数据库:
表1:Region(ID,Province)
表2:City(ID,City,Province)
二.代码实现:
<!--#include file="Conn.asp"-->
<%
function DbCombox()
dim rs,sql,msg
sql = "select * from Region"
set rs = conn.execute(sql)
while not rs.eof
msg = msg & "<option value=""" & rs("Province") & """>" & rs("Province") & "</option>"
rs.movenext
wend
rs.close
set rs = nothing
DbCombox = msg
End function
%>
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>会员登录</title>
</head>
<body>
<script language ="javascript" >
Citys = new Array();
<%
dim rs,sql,i
sql = "select * from City"
set rs = Conn.execute(sql)
i = 0
while not rs.eof
%>
Citys[<%=i%>] =new Array("<%=rs("Province")%>","<%=rs("City")%>");
<%
i = i + 1
rs.movenext
wend
rs.close
set rs = nothing
%>
function changeselect(selvalue){
var selvalue = selvalue;
var i;
document.form1.City.length = 0 ;
document.form1.City.options[document.form1.City.length] = new Option("请选择","");
for (i = 0 ;i <Citys.length;i++){
if(Citys[i][0]==selvalue){
document.form1.City.options[document.form1.City .length] = new Option(Citys[i][1],Citys[i][1]);
}
}
}
document.form1.City.options[document.form1.City.length] = new Option("请选择","");
</script>
<div align="center">
<form method="POST" action="forum.asp" name="form1">
<table border="0" cellpadding="0" style="border-collapse: collapse" width="100%" id="table1" height="59">
<tr>
<td width="67" height="30" bgcolor="#D4D0C8"><b><font size="2">地区</font></b></td>
<td height="30" bgcolor="#D4D0C8"><select size="1" name="Region" onchange ="changeselect(document.form1.Region.options[document.form1.Region.selectedIndex].value)">
<%=DbCombox()%></select></td>
</tr>
<tr>
<td width="67" height="30"><b><font size="2">城市</font></b></td>
<td height="30"><select size="1" name="City"></select></td>
</tr>
</table>
</form>
</div>
</body>
</html>