|
三级联动列表框(修正版)
一个基于javascript的三级联动列表框,标题为"Javascript + Asp +Access 三级联动列表框"的代码,以下是原版代码:
--------------------------------------------------------------------------------
<%
'连接数据库表
sqlsupercat= "select * from ctglossarysupercat"
sqlsubcat= "Select a.*, b.*, c.* FROM (ctglossarysubcat AS a left JOIN ctglossarysubsubcat as c on a.gscid=c.gscid ) left JOIN ctglossarysupercat AS b ON a.gcid = b.gcid"
sqlsubsubcat= "select * from ctglossarysubsubcat"
set rs=server.CreateObject("adodb.recordset") '创建 rs 数据查询
%>
<% rs.open sqlsubcat,MM_conn_string,1 %>
<script LANGUAGE="JAVASCRIPT">
var onecount; //定义子类计数
onecount=0; //设置子类计数默认值为0
subcat = new Array(); //定义显示子类数组
<% count = 0
do while not rs.eof %>
subcat[<%=count%>] = new Array("<%=rs("gscat")%>","<%=rs("a.gcid")%>","<%=rs("a.gscid")%>","<%=rs("c.gcid")%>","<%=rs("c.gscid")%>","<%=rs("gsscat")%>");
<% count = count + 1
rs.movenext
loop
rs.close
%>
onecount=<%=count%>; //子类条目总数
function changelocation(locationid)
{
document.catform.subid.length = 0;
document.catform.subsubid.length = 0;
var locationid=locationid;
var i;
for (i=0;i < onecount; i++)
{
if (subcat[i][1] == locationid)
{
document.catform.subid.options[document.catform.subid.length] = new Option(subcat[i][0], subcat[i][2]);
}
}
for (i=0;i < onecount; i++)
{
if (subcat[i][4]==document.catform.subid.options.value)
{
document.catform.subsubid.options[document.catform.subsubid.length] = new Option(subcat[i][5], subcat[i][3]);
}
}
}
</script>
<% rs.open sqlsubsubcat,MM_conn_string,1 %>
<script LANGUAGE="JAVASCRIPT">
var osubnecount; //定义子类计数
subonecount=0; //设置子类计数默认值为0
subsubcat = new Array(); //定义显示子类数组
<% subcount = 0
do while not rs.eof %>
subsubcat[<%=subcount%>] = new Array("<%=rs("gsscat")%>","<%=rs("gscid")%>","<%=rs("gsscid")%>");
<% subcount = subcount + 1
rs.movenext
loop
rs.close
%>
subonecount=<%=subcount%>; //子类条目总数
function subchangelocation(sublocationid)
{
document.catform.subsubid.length = 0;
var sublocationid=sublocationid;
var i;
for (i=0;i < subonecount; i++)
{
if (subsubcat[i][1] == sublocationid)
{
document.catform.subsubid.options[document.catform.subsubid.length] = new Option(subsubcat[i][0], subsubcat[i][2]);
}
}
}
</script>
<form NAME="catform" ACTION="../Templates/receiveFormT.asp" METHOD="POST">
<%
rs.open sqlsupercat,MM_conn_String,1,1
if rs.eof and rs.bof then
response.write "errorNothing_"
response.end
else
%>
<select name="superid" onChange="changelocation(document.catform.superid.options[document.catform.superid.selectedIndex].value)" size="1">
<option selected value="">==大类==</option>
<% do while not rs.eof %>
<option value="<%=trim(rs("gcid"))%>">
<%=trim(rs("gcat"))%>
</option>
<% rs.movenext
loop
rs.close
end if %>
</select>
<select name="subid" size="1" onChange="subchangelocation(document.catform.subid.options[document.catform.subid.selectedIndex].value)">
<option selected value="">==子类==</option>
</select>
<select name="subsubid">
<option selected value="">==子类子类==</option>
</select> <br>
<input TYPE="submit" NAME="Subzmit" VALUE="Submit">
<input TYPE="RESET" NAME="Reset" VALUE="Reset">
</form>
<% set rs = nothing%>
--------------------------------------------------------------------------------
修正过的代码:
--------------------------------------------------------------------------------
<html>
<head>
<%
'连接数据库表
sql1= "select * from cate"
sql2= "Select * from cate2"
sql3= "select * from cate3"
set rs=server.CreateObject("adodb.recordset") '创建 rs 数据查询
%>
<% rs.open sql2,conn,1,1 %>
<script LANGUAGE="JAVASCRIPT">
var onecount; //定义子类计数
onecount=0; //设置子类计数默认值为0
subcat = new Array(); //定义显示子类数组
<% count = 0
do while not rs.eof %>
subcat[<%=count%>] = new Array("<%=rs("two_cate")%>","<%=rs("gcid")%>","<%=rs("gscid")%>");
<% count = count + 1
rs.movenext
loop
rs.close
%>
onecount=<%=count%>; //子类条目总数
<% rs.open sql3,conn,1 %>
var osubnecount; //定义子类计数
subonecount=0; //设置子类计数默认值为0
subsubcat = new Array(); //定义显示子类数组
<% subcount = 0
do while not rs.eof %>
subsubcat[<%=subcount%>] = new Array("<%=rs("three_cate")%>","<%=rs("gscid")%>","<%=rs("three_cate")%>");
<% subcount = subcount + 1
rs.movenext
loop
rs.close
%>
subonecount=<%=subcount%>;
function changelocation(locationid)
{
document.reg.two_cate.length = 0;
document.reg.three_cate.length = 0;
var locationid=locationid;
var i;
for (i=0;i < onecount; i++)
{
if (subcat[i][1] == locationid)
{
document.reg.two_cate.options[document.reg.two_cate.length] = new Option(subcat[i][0], subcat[i][2]);
}
}
for (i=0;i < onecount; i++)
{
if (subsubcat[i][1] ==document.reg.two_cate.options.value)
{
document.reg.three_cate.options[document.reg.three_cate.length] = new Option(subsubcat[i][0], subsubcat[i][2]);
}
}
}
</script>
<% rs.open sql3,conn,1 %>
<script LANGUAGE="JAVASCRIPT">
var osubnecount; //定义子类计数
subonecount=0; //设置子类计数默认值为0
subsubcat = new Array(); //定义显示子类数组
<% subcount = 0
do while not rs.eof %>
subsubcat[<%=subcount%>] = new Array("<%=rs("three_cate")%>","<%=rs("gscid")%>","<%=rs("three_cate")%>");
<% subcount = subcount + 1
rs.movenext
loop
rs.close
%>
subonecount=<%=subcount%>; //子类条目总数
function subchangelocation(sublocationid)
{
document.reg.three_cate.length = 0;
var sublocationid=sublocationid;
var i;
for (i=0;i < subonecount; i++)
{
if (subsubcat[i][1] == sublocationid)
{
document.reg.three_cate.options[document.reg.three_cate.length] = new Option(subsubcat[i][0], subsubcat[i][2]);
}
}
}
</script>
</head>
<body>
<form name="reg" action="" method="post">
<div>
<%rs.open sql1,conn,1,1
if rs.eof and rs.bof then
response.write "errorNothing_"
response.end
else
%>
总分类:<select name="main_cate" id="se" onChange="changelocation(document.reg.main_cate.options[document.reg.main_cate.selectedIndex].value)" size="1">
<option selected value="">请您选择总分类</option>
<% do while not rs.eof %>
<option value="<%=trim(rs("gcid"))%>">
<%=trim(rs("main_cate"))%>
</option>
<% rs.movenext
loop
rs.close
end if %>
</select> 大类
<select name="two_cate" id="se" onChange="subchangelocation(document.reg.two_cate.options[document.reg.two_cate.selectedIndex].value)">
<option selected value="">请您选择大类</option>
</select>
小类
<select name="three_cate" id="se">
<option selected value="">请您选择小类</option>
</select>
<% set rs = nothing%>
</div>
这里面的三个表,是这样建立:
cate表:gcid(自动编号,数据id号) main_cate(文本,总分类)
cate2表:gscid(自动编号,数据id号) gcid(数字,取自总分类中数据的id号) two_cate(文本,大类)
cate3表:gsscid(自动编号,,数据id号) gscid(数字,取自大类中数据的id号) three_cate(文本,小类) |
|