效益型网络营销方案
当前位置：新竞争力首页 > 公司博客首页 > 张俊辉的博客
三级联动列表框(修正版)

        最近由于工作的需要,要制作一个基于javascript的三级联动列表框,由于自己的javascript水平有限,所以只好借助搜索引擎找一个做好的代码拿来研究,在网上找了好久,发现了很多不同版本的代码,但都不是自己想要的类型,不过功夫不负有心人,最后终于找到一个标题为"Javascript + Asp +Access 三级联动列表框"的代码,以下是原版代码:

作者:红心男孩 http://www.kekecn.com/blog

<%
'连接数据库表
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%>


       这个代码跟自己的需求很相似,但刚开始也是一头雾水,因为里面涉及到三个表,但是作者并没有写出三个表的具体字段,所以好是一番研究,终于明白了代码中出现的字段应该出现在那个表中,很快三个表就建好了,接下来就是添加数据了,刚开始只是草草的添加了一下,所以在运行过程中一切正常。

        然后就把它移植到需要这个联运列表框的页面,然后就开始大量的添加数据,不过这次在运行中出现了问题,就是第二个列表框会出现重复数据的情况,具体就是:当第三个表中添加一个数据(隶属于第二个表中的数据)或没有添加数据的时候,第二个列表框中的数据都是单独出现的,比如里面有一个金属,那就只是看到一个金属项,如果在第三个表中再添加一个金属的分类,第二个列表框中就会出现两个金属项.

       原本以为可以很好的完成工作了,没想到却又蹦出这个问题,再加上自己对javascript了解有限,真是感觉郁闷到家了,但只是郁闷是没用的,工作还是要做地,所以只好硬着头皮上了,不过这着实是把自己给为难了一把,经过了无数次的修改,总是不见什么成效,不过,还是那句话,功夫不负有心人,经过将近一天的不断修改,终于是搞定了.以下是我修正过的代码:

<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> &nbsp;大类
      <select name="two_cate" id="se" onChange="subchangelocation(document.reg.two_cate.options[document.reg.two_cate.selectedIndex].value)">
<option selected value="">请您选择大类</option>
</select>
 &nbsp;小类
<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(文本,小类)
        经过一番修改后,这个三级联运列表框已经能够正常运行了,在此特别感谢原代码作者红心男孩,正是基于你的代码,我才能做出这个列表框,通过这次的制作,我又学会了一些新东西,网络真是个好地方,许多问题都变的简单了.

发表评论：

    昵称：
    密码：
    标题：
“新竞争力”是深圳市竞争力科技有限公司的注册商标
深圳市竞争力科技有限公司 版权所有
电话:86-755-26502263 　Email:info@jingzhengli.cn