二级联动下拉列表 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