`
wlcxx98
  • 浏览: 62831 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
最近访客 更多访客>>
社区版块
存档分类
最新评论

AJAX二级动联下拉列表

阅读更多

数据库连接文件conn.asp

<%

dimstrconnection,conn,strquery
strconnection
="PROVIDER=SQLOLEDB;DATASOURCE=(local);UID=sa;PWD=;DATABASE=SelectTest"
setconn=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">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>无刷新动联下拉列表</title>
<scripttype="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>
<selectname="class1"id="class1"onchange="javascript:getClass2();">
<optionvalue="0">一级</option>
<%...
dimrs
dimsql
Setrs=Server.CreateObject("ADODB.Recordset")
sql
="select*fromclass1"
rs.opensql,conn,
1,1
dowhilenotrs.eof
%>
<optionvalue="<%=rs("id")%>"><%=rs("class1")%></option>
<%...
rs.Movenext()
loop
rs.close
Setrs=nothing
conn.close()
SetConn=Nothing
%>
</select>
<selectname="class2"id="class2">
<optionvalue="0">二级</option>
</select>
</body>
</html>

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

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


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

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

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

分享到:
评论

相关推荐

    ajax 二级联动 php的下拉列表

    ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表ajax 二级联动 php的下拉列表

    基于Ajax的二级联动下拉列表.rar

    1. 创建HTML结构:设置两个`&lt;select&gt;`元素,分别代表一级和二级下拉列表,并为其添加ID以便于JavaScript操作。 2. JavaScript初始化:在页面加载完成后,使用JavaScript为第一个下拉框绑定“change”事件。事件处理...

    ajax的二级联动下拉列表

    总之,Ajax的二级联动下拉列表是通过监听用户在一级下拉列表的选择,利用Ajax发送请求获取相应的二级选项数据,最后在前端动态更新二级下拉列表。这一功能的实现涉及前端的JavaScript、Ajax,以及后端的数据处理和...

    Ajax实现java web 中下拉列表二级联动

    通常,一级下拉列表的初始值可以通过JavaScript动态填充,二级下拉列表的值根据一级的选择动态加载。 2. **编写JavaScript代码**:使用JavaScript(如jQuery库)监听一级下拉列表的`change`事件。当用户更改一级...

    ajax实现动态下拉列表

    本实例通过AJAX(异步JavaScript和XML)技术实现了一个简单的二级联动效果,仅使用了两个JSP文件,简化了理解难度。 首先,我们来了解一下AJAX。AJAX是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。...

    帝国CMS二级联动插件(ajax下拉列表) 帝国CMS二级联动插件(ajax下拉列表).rar

    本压缩包“帝国CMS二级联动插件(ajax下拉列表).rar”提供的就是针对帝国CMS系统的一个二级联动插件,利用AJAX技术实现实时数据加载。AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,...

    Ajax二级联动下拉列表框

    ### Ajax 实现二级联动下拉列表框 #### 一、简介 在Web开发中,有时我们需要根据用户在第一个下拉列表中的选择动态地更新第二个下拉列表的内容。这种功能被称为“二级联动”,常用于地址选择(如省份和城市的选择)...

    用ajax实现的jsp二级联动下拉列表

    二级下拉列表则留空,待用户选择一级后通过AJAX填充。 接下来,我们需要编写JavaScript代码,监听一级下拉列表的`onchange`事件。当用户改变一级选项时,触发AJAX请求。可以使用XMLHttpRequest对象或者更现代的...

    Ajax+PHP二级联动下拉列表.rar

    在这个案例中,Ajax的主要作用是实时获取服务器上的数据,更新二级下拉列表的内容。 **PHP** 是一种服务器端的脚本语言,广泛用于Web开发,可以生成动态网页内容。在二级联动下拉列表的实现中,PHP将负责处理Ajax...

    Ajax实现下拉列表从数据库读取数据级联

    级联下拉列表通常用于关联数据的筛选,例如省份-城市-区县的选择,当用户在一级下拉列表中选择一个选项时,二级下拉列表会动态加载与之相关的数据。 首先,我们需要理解Ajax的工作原理。Ajax允许我们通过JavaScript...

    ajax dwr 框架实现二级联动下拉列表源码

    **Ajax DWR 框架实现二级联动下拉列表源码详解** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。DWR(Direct Web Remoting)则是一个用于Java web应用的开源...

    php+ajax二级联动

    5. **前端更新**:JavaScript函数接收到响应后,解析JSON数据,创建新的一级或二级下拉列表的选项,并将其插入到县的下拉列表中。 6. **用户交互**:用户现在可以在更新后的县下拉列表中选择,如果需要,这个过程...

    ASP 实用的ajax二级联动菜单

    在本项目中,"ASP 实用的ajax二级联动菜单"是一个结合了这两种技术的应用,旨在创建一个响应快速、交互流畅的二级菜单系统。 在ASP中,我们通常会使用VBScript或JScript作为脚本语言来处理服务器端逻辑。在这个案例...

    Ajax级联下拉列表.rar

    级联下拉列表是一种常见的前端交互设计,用户在一个下拉列表中做出选择后,第二个或更多的下拉列表会根据前一个选择动态地加载相关数据。这通常用于处理有层级关系的数据,如国家-城市-区县的选择,或者类别-子类别-...

    极个性的ajax伪静态和ajax二级联动下拉列表

    这几天又有人在社区问我无刷新联动和asp伪静态的问题,于是我就写了这么个小程序来给对这部分有疑问的朋友。 其中这个伪静态是本人原创作品(如有思路相同的前做则纯属意外呵呵)。... 本代码仅供大家学习之用,...

    ssh+ajax的二级下拉菜单

    这个项目"ssh+ajax的二级下拉菜单"结合了SSH框架与Ajax技术,实现了动态的、交互式的用户界面,特别是二级下拉菜单的功能。这个功能在网页中常见于地区选择、类别导航等场景,能够提供更流畅的用户体验。 首先,...

    AJAX重构+级联下拉列表

    本项目聚焦于使用AJAX进行页面重构,特别是实现级联下拉列表,这是一种常见的用户界面元素,常见于地址选择、类别筛选等场景。 在级联下拉列表中,一个下拉框的选择会影响另一个下拉框的选项。例如,当你在第一个...

    ajax 异步实现两级联动下拉列表和输入提示

    以上就是基于AJAX实现的二级联动下拉列表和输入提示的基本原理和步骤。这个项目是一个典型的实例,可以帮助开发者了解如何在实际应用中运用这些技术。通过不断实践和优化,我们可以提供更加高效、友好的用户体验。

    ajax实现下拉列表级联

    在本文中,我们将深入探讨如何使用Ajax技术来实现下拉列表的级联效果,这是一个常见的交互功能,特别是在数据录入和筛选场景中。我们将基于EJB(Enterprise JavaBeans)技术连接数据库,以动态加载和更新下拉列表...

    二级联动(二个下拉列表关联)

    在"二级联动(二个下拉列表关联)"这个例子中,我们可以深入理解其背后的实现原理和技术细节: 1. **HTML 结构**:首先,HTML 页面会包含两个`&lt;select&gt;`元素,每个元素内部包含多个`&lt;option&gt;`标签,表示不同的可...

Global site tag (gtag.js) - Google Analytics