<!--#include file="conn.inc"-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<title>两级关联菜单</title>
</HEAD>
<BODY>
<!--
by fason(2003.4.5)
表名:pro_city
结构:id(自编) province(文本) city(文本)
注释:conn.inc为连接数据库文件
ie,netscape,mozilla下测试通过
-->
<SCRIPT LANGUAGE=javascript>
<!--
var prv=new Array()//省
var cty=new Array()//市
function init(){
<%
dim prv,cty,i,j
i=0
set prv=conn.execute("select distinct province from pro_city")
if not prv.eof then
do while not prv.eof
j=0
%>
prv[<%=i%>]="<%=trim(prv("province"))%>";
<%
set cty=conn.execute("select city from pro_city where province='"&trim(prv("province"))&"'")
if not cty.eof then%>
cty[<%=i%>]=new Array()
<%do while not cty.eof%>
cty[<%=i%>][<%=j%>]="<%=trim(cty("city"))%>"
<%j=j+1
cty.movenext
loop
end if
cty.close :set cty=nothing
i=i+1
prv.movenext
loop
end if
prv.close :set prv=nothing
%>
if(prv.length >0){
for(i=0;i<prv.length;i++)
with(document.frm.province)options[length]=new Option(prv[i],prv[i])
document.frm.province.onchange=new Function("go(this.selectedIndex)")
}
}function go(sIndex){
with(document.frm.city){
length=0;
if(sIndex==0){options[0]=new Option("请选择");return}
for(i=0;i<cty[sIndex-1].length;i++)
options[length]=new Option(cty[sIndex-1][i],cty[sIndex-1][i])
}
}
window.onload=init
-->
</SCRIPT>
<form name=frm>
<SELECT name=province>
<OPTION selected>请选择</OPTION>
</SELECT>
<SELECT name=city>
<OPTION selected>请选择</OPTION>
</SELECT>
</form>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<title>两级关联菜单</title>
</HEAD>
<BODY>
<!--
by fason(2003.4.5)
表名:pro_city
结构:id(自编) province(文本) city(文本)
注释:conn.inc为连接数据库文件
ie,netscape,mozilla下测试通过
-->
<SCRIPT LANGUAGE=javascript>
<!--
var prv=new Array()//省
var cty=new Array()//市
function init(){
<%
dim prv,cty,i,j
i=0
set prv=conn.execute("select distinct province from pro_city")
if not prv.eof then
do while not prv.eof
j=0
%>
prv[<%=i%>]="<%=trim(prv("province"))%>";
<%
set cty=conn.execute("select city from pro_city where province='"&trim(prv("province"))&"'")
if not cty.eof then%>
cty[<%=i%>]=new Array()
<%do while not cty.eof%>
cty[<%=i%>][<%=j%>]="<%=trim(cty("city"))%>"
<%j=j+1
cty.movenext
loop
end if
cty.close :set cty=nothing
i=i+1
prv.movenext
loop
end if
prv.close :set prv=nothing
%>
if(prv.length >0){
for(i=0;i<prv.length;i++)
with(document.frm.province)options[length]=new Option(prv[i],prv[i])
document.frm.province.onchange=new Function("go(this.selectedIndex)")
}
}function go(sIndex){
with(document.frm.city){
length=0;
if(sIndex==0){options[0]=new Option("请选择");return}
for(i=0;i<cty[sIndex-1].length;i++)
options[length]=new Option(cty[sIndex-1][i],cty[sIndex-1][i])
}
}
window.onload=init
-->
</SCRIPT>
<form name=frm>
<SELECT name=province>
<OPTION selected>请选择</OPTION>
</SELECT>
<SELECT name=city>
<OPTION selected>请选择</OPTION>
</SELECT>
</form>
</BODY>
</HTML>
<!-- #include file="connection.asp" -->
<script language=javascript>
<%
dim RS
Set RS = Server.CreateObject("ADODB.Recordset")
RS.open "SELECT * FROM tableName ORDER BY provinceName DESC", Conn, 0, 1dim provinceName '省名
dim provinceList '记录所有的省名, 最后输出到JS里组成省名数组
dim cityList '记录某个省的所有城市名, 最后输出到JS里组成城市名数组
dim cityIndex 'JS的city数组名与省名下拉框的索引对应
cityIndex = 1 do while not RS.eof
if isEmpty(provinceName) then
cityList = cityList & chr(34) & Trim(RS("cityName")) & chr(34) &","
provinceName = Trim(RS("provinceName"))
else
if provinceName<>Trim(RS("provinceName")) then
provinceList = provinceList & chr(34) & provinceName & chr(34) &","
if not isEmpty(cityList) then Response.write "var city"& cityIndex &_
" = ["& Left(cityList, Len(cityList)-1) &"];"& VBCrLf
'输出每个省所对应的城市名的列表并组成JS的数组, 数组形式参考下面的实例
cityIndex = cityIndex + 1
cityList = ""
end if
provinceName = Trim(RS("provinceName"))
cityList = cityList & chr(34) & Trim(RS("cityName")) & chr(34) &","
'将每个省里的所有城市名组成一串字串
end if
RS.movenext
loop if not isEmpty(cityList) then
Response.write "var city"& cityIndex &" = ["& Left(cityList, Len(cityList)-1) &"];"& VBCrLf
end if
if not isEmpty(provinceName) then
provinceList = provinceList & chr(34) & provinceName & chr(34) &","
Response.write "var provinceName = ["& Left(provinceList, Len(provinceList)-1) &"];"
'输出省名字串并组成省名的JS数组, 形式见下实例
end if RS.close : Set RS=nothing
Conn.close : Set Conn=nothing
%>
</script><form name=form1>
<select name=province onchange="cityName(this.selectedIndex)">
<option value="">请选择省名</option>
</select><select name=city>
<option value="">请选择城名</option>
</select>
</form><script language=javascript>/* 若要直接看下拉框联动效果的话, 将这段被注释的代码起用, 且上面的那段ASP注释即可
var city1 = ["杭州", "宁波", "温州", "绍兴", "金华", "湖州"];
var city2 = ["南京", "苏州", "无锡", "常州", "镇江", "徐州"];
var city3 = ["合肥", "翕县", "黄山", "祁门", "休宁"];
var city4 = ["南昌", "九江", "赣州", "上饶", "新余", "景德镇"];
var provinceName = ["浙江", "江苏", "安徽", "江西"];
//你在ASP输出的页面里应该看到如上这般的JS数组, 能看到则表示成功
*/
function province()
{ var e = document.form1.province;
for (var i=0; i<provinceName.length; i++)
e.options.add(new Option(provinceName[i], provinceName[i]));
}
function cityName(n)
{
var e = document.form1.city;
for (var i=e.options.length; i>0; i--) e.remove(i);
if (n == 0) return;
var a = eval("city"+ n); //得到城市的数组名
for (var i=0; i<a.length; i++) e.options.add(new Option(a[i], a[i]));
}
function window.onload()
{
province(); //初始时给省名下拉菜单赋内容
}
</script>