二级联动下拉列表 asp+js【转】

前言 

学网络编程的人几乎都遇到过这种问题，就是选择大城市小城市跟前联动的效果，如果是在asp.net里，很简单，一个事件就可以解决了，在asp里仿佛也 可以用传值的方法解决此问题，不过要考虑到其它表单状态保存的问题，但是不管以上两种方法哪一种，都有一个不好的地方，那就是页面刷新，总是闪来闪去的页 面会让人感觉到反感。

    为此已经出现了一门新技术 ajax 解决了刷新页面的问题，为此天道也专门研究了ajax，感觉也不是特别难，如果加以练习应该可以应用的更加灵活，在以后的文章中我会把ajax做一个详细 的讲解。今天这篇文章主要是讲解asp和asp.net里用js实现下拉列表无刷新联动功能。

分析

    首先我们这里要解决的最重要问题就是无刷新，既然是无刷新，就不能让页面发送请求（如果是发送请求的无刷新就是ajax了，这里说的是除ajax以外的情 况），在asp.net里，如果用事件来做二级联动的话，是每次点第一个下拉列表的时候发送一个请求，用选中的值去取出下一级的内容。这样的话，就会每次 发送请求每次刷新，asp里也是一样，所以要避免这个问题，这里用到的一个办法就是把所有的值都先调出来放到页面里，以供前面选择展示，这样就不会每次都 去发送请求去调数据了，当然也会有刷新了。（如果数据量大，最好用ajax，因为这样会增加页面代码量，不是特别大的这里不考虑优化问题。）

一. 数据库的设计。

    可能你用这个功能做其它的大类小类的联动，也可能像我一样做城市之间的联动，但是我还是要把库结构说一下，以免我后面的代码大家看不懂，这样规划一下，也 方便后面的讲解。

table 1

----------表名：BCity----------

    BCityId    BCityName
1          北京
2          河北

table 2

----------表名：SCity----------

SCityId    SCityName  BCityId
1          海淀        1
2          朝阳        1
3          崇文        1
4          承德        2
5          唐山        2
6          廊坊        2

关联字段: BCity.BcityId=SCity.BCityId

二. 实现原理JS编写

    我们要把所有的值都放到页面里，用js去控制他的显示，所以我们首先想到的就是数组，我们先把所有的大城市加载到下拉列表一里，然后把把有的小类都加载到 js的一个数组里，然后在根据大类的选择去调出小城市。把小类都写到数组里，代码如下：

<script type="text/javascript">
<!--
var subval2 = new Array();  //这里定义一个数组

     <%
set ClassRs=server.CreateObject("adodb.recordset")
ClassSql="select * from SCity
ClassRs.open ClassSql,conn,1,3

          if ClassRs.eof and ClassRs.bof then  
Response.Write("暂无信息")
else
count=0'定义数组的下标
do while not ClassRs.eof
%>
subval2[<%=count%>] = new Array('<%=ClassRs("BCityId")%>','<%=ClassRs("SCityId")%>','<%=ClassRs

("SCityName")%>');
<%
count=count+1
ClassRs.movenext                                                                       

                   
loop                                                             
ClassRs.close                                                                                 

   set ClassRs=nothing                                                                                   
end if
%>

代码解释： 首先要引入一个conn.asp数据库连接文件，这里我省略掉了，然后就是调出SCity表里的数据，count是定义的数组下标变量。

 subval2[<%=count%>] = new Array('<%=ClassRs("BCityId")%>','<%=ClassRs("SCityId")%>','<%=ClassRs("SCityName")%>'); 这条语句就是为数组依次赋值。一直到把所有的小城市全加载到这个数组里，有人要问，这个数组里怎么是三个值，其中有一个是大城市的id，是的，我们就是用 这个来区分类别的，最后我们的二级列表也是根据这个值取出所对应的小城市的。有了这样一个数组，我们还需要一个事件，把数组里的值写到下拉列表中，接下来 在看一段代码：

function ClassChange(locationid)
{
document.form1.SelectClass.length = 0;
//document.form1.SelectClass.options[0] = new Option('选择小类','');//如果想直接选中第一个则注释此句。

 for (i=0; i<subval2.length; i++)
{
if (subval2[i][0] == locationid)
{
document.form1.SelectClass.options[document.form1.SelectClass.length] = new Option(subval2[i]

[2],subval2[i][1]);
}
}
}

  分析：这是一个function 我们看到这个function有一个参数，这个参数我这里告诉你是传入的一个大城市的标识。我们就是根据这个值去取出所对应的小类列表。

  代码解释：document.form1.SelectClass.length = 0; 首先先把下拉列表二的值至为空，否则会产生叠加现象。

document.form1.SelectClass.options[0] = new Option('选择小类','');这句话是填加选择小城市项的，如果去掉这句则直接显示第一个小城市。

  下面是一个循环，循环我们以前赋值的那个数组，然后是一个判断，判断挑出我们所属这个大城市的小城市列表，这里我们以前赋的那个大城市号就有用了，在这里 就是判断那个大城市号如果相等，则把哪个数组的值加到下拉列表二中。

三.事件的触发。

    以上两节讲的是js的事件，和小城市的js数组的定义，下面说一下这个事件的调用，首先，我们要在页面上放两个下拉列表，一个是大城市列表，一个是小城市 列表，代码如下：

<%
set ItemRs=server.CreateObject("adodb.recordset")
ItemSql="select * from BCity"
ItemRs.open ItemSql,conn,1,3
if ItemRs.eof and ItemRs.bof then  
Response.Write("暂无信息")
else
Response.Write("<select name=""SelectItem"" onChange=""ClassChange(this.value)""

style=""width:80px;"">")
Response.Write("<option value=""0"" selected>选择大类</option>")
do while not ItemRs.eof
%>
<option value="<%=ItemRs("BCityId")%>"><%=ItemRs("BCityName")%></option>
<%
ItemRs.movenext                                                                                    

      
loop  
Response.Write("</select>")                                                              
ItemRs.close                                                                                   

         
set ItemRs=nothing                                                                             

               
end if
%>
<select name="SelectClass" style="width:80px; ">
</select>

代码讲解：

    这段代码相对就简单多了，调出大城市的数据，然后循环放到一个下拉列表中，事件 onChange是用来在值变化时触发事件，并将大城市的编号转入方法，然后由方法完成将小类展示在第二个列表里。

总结

    上学的时候感觉这些代码真的好复杂，用的真高深，现在研究起来，感觉好简单，因为你看到过更高深的代码，因为你的知识在进步，虽然网上也有了很多这样的文 章，我还是要整理一篇出来，因为我感觉他们讲解的都不够好，做为一个初学者来说，如果没有很好的讲解是难理解的，虽然我感觉很简单，这也正应了那句话： “会者不难，难者不会”。好了，今天就写到这里吧，如果你在这里获得了帮助，不要忘了留个言谢谢我。:)

版权所有 天道酬勤   2009.2.9