Js实现两级下拉联动（非异步方式）

原来用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>

 

二级下拉部分代码:

 

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>

转载于:https://www.cnblogs.com/7788/archive/2009/05/13/1455930.html