AJAX二级动联下拉列表

数据库连接文件conn.asp

< %

dim strconnection,conn,strquery
strconnection = " PROVIDER=SQLOLEDB;DATASOURCE=(local);UID=sa;PWD=;DATABASE=SelectTest "
set conn = server.createobject( " adodb.connection " )
conn.openstrconnection

% >

前台显示文件ShowSelect.asp

<% ... @LANGUAGE="VBSCRIPT"CODEPAGE="936" %>
<!-- #includefile="conn.asp" -->
<! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html;charset=gb2312" />
< title > 无刷新动联下拉列表 </ title >
< script type ="text/javascript" > ...
<!--
varxmlhttp;
varcache=[];//用于存储已经获取的数据，避免每次一级列表变化都要从服务器下载数据，加快显示速度
//建立XMLHttpRequest对象
try...{
xmlhttp=newActiveXObject('Msxml2.XMLHTTP');
}catch(e)...{
try...{
xmlhttp=newActiveXObject('Microsoft.XMLHTTP');
}catch(e)...{
try...{
xmlhttp=newXMLHttpRequest();
}catch(e)...{}
}
}
functiongetClass2()
...{
varobj;
varobj2
obj=document.getElementById("class1");
obj2=document.getElementById("class2");
if(!cache[obj.selectedIndex])...{
xmlhttp.open("get","getClass2.asp?id="+obj.value);
xmlhttp.onreadystatechange=function()...{
if(xmlhttp.readyState==4)...{
if(xmlhttp.status==200)...{
cache[obj.selectedIndex]=eval("("+unescape(xmlhttp.responseText)+")");
getClass2();
}
else...{
alert("网络故障");
}
}
}
xmlhttp.setRequestHeader("If-Modified-Since","0");
xmlhttp.send(null);
return;
}
var_Arr=cache[obj.selectedIndex];
obj2.length=1;
for(vari=0;i<_Arr.length-1;i+=2)...{
with(obj2)...{
options[options.length]=newOption(_Arr[i],_Arr[i+1]);
}
}
}

//-->
</ script >
</ head >

< body >
< select name ="class1" id ="class1" onchange ="javascript:getClass2();" >
< option value ="0" > 一级 </ option >
<% ...
dimrs
dimsql
Setrs=Server.CreateObject("ADODB.Recordset")
sql="select*fromclass1"
rs.opensql,conn,1,1
dowhilenotrs.eof
%>
< option value ="<%=rs(" id")% > "> <% = rs( " class1 " ) %> </ option >
<% ...
rs.Movenext()
loop
rs.close
Setrs=nothing
conn.close()
SetConn=Nothing
%>
</ select >
< select name ="class2" id ="class2" >
< option value ="0" > 二级 </ option >
</ select >
</ body >
</ html >

后台获取二级数据文件getClass.asp

< %@LANGUAGE = " VBSCRIPT " CODEPAGE = " 936 " % >
< ! -- #includefile = " conn.asp " -->
< %
dim rs
dim sql
dim id
id = Trim (Request.QueryString( " id " ))
Set rs = Server.CreateObject( " ADODB.Recordset " )
sql = " select*fromclass2whereclass1id= " & id
rs.opensql,conn, 1 , 1
Response.Write( " [ " )
do while not rs.eof
Response.Write( " ' " & escape(rs( " class2 " )) & " ', " )
Response.Write(rs( " id " ) & " , " )
rs.movenext
loop
Response.Write( " 0] " )
rs.close
Set rs = nothing
conn.close()
Set Conn = Nothing
% >

本系统在XP + IE6,7 XP+firefox测试通过

今天就写个一个吧,有什么问题欢迎给我留言.

明天再写一个自定对话框的例子.