AJAX二级动联下拉列表

数据库连接文件conn.asp

< %

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

% >  

前台显示文件ShowSelect.asp

 

<% ... @LANGUAGE="VBSCRIPT" CODEPAGE="936" %>
<!-- #include file="conn.asp" -->
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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" > ...
<!--
var xmlhttp;
var cache = [];//用于存储已经获取的数据，避免每次一级列表变化都要从服务器下载数据，加快显示速度
//建立XMLHttpRequest对象
try...{
    xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}catch(e)...{
    try...{
        xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
    }catch(e)...{
        try...{
            xmlhttp= new XMLHttpRequest();
        }catch(e)...{}
    }
}
function getClass2()
...{
    var obj;
 var obj2
    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(var i = 0;i < _Arr.length - 1; i+=2)...{
  with(obj2)...{
   options[options.length] = new Option(_Arr[i],_Arr[i+1]);
  }
 }
}

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

< body >
< select  name ="class1"  id ="class1"  onchange ="javascript:getClass2();" >
  < option  value ="0" > 一级 </ option >
<% ...
 dim rs
 dim sql
 Set rs = Server.CreateObject("ADODB.Recordset")
 sql = "select * from class1"
 rs.open sql,conn,1,1
 do while not rs.eof
%>
  < option  value ="<%=rs(" id")% > "> <% = rs( " class1 " ) %> </ option >
<% ...
 rs.Movenext()
 loop
 rs.close
 Set rs = nothing
 conn.close()
 Set Conn = Nothing
%>
</ select >
< select  name ="class2"  id ="class2" >
  < option  value ="0" > 二级 </ option >
</ select >
</ body >
</ html >

 

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

 

< %@LANGUAGE = " VBSCRIPT "  CODEPAGE = " 936 " % >
< ! -- #include file = " conn.asp " -->
< %
  dim  rs
  dim  sql
  dim  id
 id  =   Trim (Request.QueryString( " id " ))
  Set  rs  =  Server.CreateObject( " ADODB.Recordset " )
 sql  =   " select * from class2 where class1id =  " & id
 rs.open sql,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测试通过

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

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