前言
学网络编程的人几乎都遇到过这种问题，就是选择大城市小城市跟前联动的效果，如果是在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=""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="80px;
">
</select>
代码讲解：
这段代码相对就简单多了，调出大城市的数据，然后循环放到一个下拉列表中，事件 onChange是用来在值变化时触发事件，并将大城市的编号转入方法，然后由方法完成将小类展示在第二个列表里。
总结
上学的时候感觉这些代码真的好复杂，用的真高深，现在研究起来，感觉好简单，因为你看到过更高深的代码，因为你的知识在进步，虽然网上也有了很多这样的文 章，我还是要整理一篇出来，因为我感觉他们讲解的都不够好，做为一个初学者来说，如果没有很好的讲解是难理解的，虽然我感觉很简单，这也正应了那句话： “会者不难，难者不会”。好了，今天就写到这里吧，如果你在这里获得了帮助，不要忘了留个言谢谢我。:)
版权所有 天道酬勤 2009.2.9