原来用js实现两级下拉菜单联动都是通过异步的方式来实现的,其实就是ajax的效果来实现,通过js提交请求到asp页面调用相关的数据,然后通过标准的xml格式返回数据,js再解析xml数据,然后绑定数据到下拉列表。
当然,这种异步方式很不错,但为了更方便,我通过使用js数组的方式,在页面加载的同时,把相关的数据都存入js数组,然后直接通过js数组数据的筛选来绑定下拉列表的相应数据。
js脚本部分程序:
Code
<script language="javascript" type="text/javascript">
var classlist=new Array(); //定义js数组
<%
sql="select * from newsclass where parentid>0" '数据库读取二级分类的数据,一级分类不需要读取,直接用asp代码加载
rs.open sql,conn,3,1
for i=1 to rs.recordcount '使用asp循环填充js数组,三维数组,分别保存栏目的父ID,栏目名称,栏目ID
if not rs.eof then
%>
classlist[<%=i-1%>]=new Array("<%=rs("parentid")%>","<%=rs("classname")%>","<%=rs("classid")%>");
<%
rs.movenext
end if
next
rs.close
%>
//一级栏目选择变动触发函数
function getSmallClass()
{
var parentid=document.all.classid1.value; //获取父栏目的ID
document.all.classid2.length=0; //将二级栏目下拉清空
document.all.classid2.options.add(new Option("选择小类","0")) //添加一个自定义的下拉选项
for(i=0;i<classlist.length;i++) //遍历js数组
{
if(classlist[i][0]==parentid) //js数组里的选项符合条件(父栏目ID来判断)
{
document.all.classid2.options.add(new Option(classlist[i][1],classlist[i][2])) //添加到二级栏目的下拉选项里
}
}
}
</script>
<script language="javascript" type="text/javascript">
var classlist=new Array(); //定义js数组
<%
sql="select * from newsclass where parentid>0" '数据库读取二级分类的数据,一级分类不需要读取,直接用asp代码加载
rs.open sql,conn,3,1
for i=1 to rs.recordcount '使用asp循环填充js数组,三维数组,分别保存栏目的父ID,栏目名称,栏目ID
if not rs.eof then
%>
classlist[<%=i-1%>]=new Array("<%=rs("parentid")%>","<%=rs("classname")%>","<%=rs("classid")%>");
<%
rs.movenext
end if
next
rs.close
%>
//一级栏目选择变动触发函数
function getSmallClass()
{
var parentid=document.all.classid1.value; //获取父栏目的ID
document.all.classid2.length=0; //将二级栏目下拉清空
document.all.classid2.options.add(new Option("选择小类","0")) //添加一个自定义的下拉选项
for(i=0;i<classlist.length;i++) //遍历js数组
{
if(classlist[i][0]==parentid) //js数组里的选项符合条件(父栏目ID来判断)
{
document.all.classid2.options.add(new Option(classlist[i][1],classlist[i][2])) //添加到二级栏目的下拉选项里
}
}
}
</script>
二级下拉部分代码:
Code
<td align="right" class=td2>产品分类:</td>
<td class=td2><select name="classid1" id="classid1" onChange="getSmallClass();">
<option value="">产品大类</option>
<%
'一级栏目通过asp代码的方式加载
sql="select classid,classname from newsclass where parentid=0 and version=" & InfoVer & " order by ordnum asc"
rs.open sql,conn,3,1
for i=1 to rs.recordcount
if not rs.eof then
%>
<option value="<%=rs("classid")%>"><%=rs("classname")%></option>
<%
rs.movenext
end if
next
rs.close
%>
</select>
<select name="classid2" id="classid2">
<option value="0">产品小类</option>
</select></td>
<td align="right" class=td2>产品分类:</td>
<td class=td2><select name="classid1" id="classid1" onChange="getSmallClass();">
<option value="">产品大类</option>
<%
'一级栏目通过asp代码的方式加载
sql="select classid,classname from newsclass where parentid=0 and version=" & InfoVer & " order by ordnum asc"
rs.open sql,conn,3,1
for i=1 to rs.recordcount
if not rs.eof then
%>
<option value="<%=rs("classid")%>"><%=rs("classname")%></option>
<%
rs.movenext
end if
next
rs.close
%>
</select>
<select name="classid2" id="classid2">
<option value="0">产品小类</option>
</select></td>