用AJAX+ASP实现的两级联动下拉菜单

最新推荐文章于 2021-06-17 09:13:27 发布

weixin_33834628

最新推荐文章于 2021-06-17 09:13:27 发布

阅读量171

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/mywap/archive/2011/11/17/2252249.html

版权

以前在实现两级联动下拉菜单的时候，要么不断的刷新，要么是在页面载入时下载所有栏目，用JAVASCRIPT来控制。现在有了更好的选择：AJAX。
index.htm
<!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>
</head>
<script language="javascript" src="Ajax.js"></script>
<body οnlοad=javascript:loadProvince();>
<select name="province" id="province" οnchange="javascript:loadCity();">
<option value="0" selected="selected">请选择</option>
</select>
<select name="city" id="city" >
<option value="0" selected="selected">请选择</option>
</select>
<div id=statusTxt></div>
</body>
</html>

Ajax.js
var http_request = false;
function send_request(url,method)
{
http_request = false;
if(window.XMLHttpRequest)
{
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType)
{
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject)
{
try
{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
}
}
}
if (!http_request)
{
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
switch(method)
{
case 1: http_request.onreadystatechange = processRequest1;
break;
case 2: http_request.onreadystatechange = processRequest2;
break;
}
http_request.open("GET",url, true);
http_request.send(null);
}
function processRequest1()
{
if (http_request.readyState == 4)
{
if (http_request.status == 200)
{
document.getElementById("statusTxt").innerHTML="";
addOptionGroup("province",http_request.responseText);
}
else
{
alert("您所请求的页面有异常。");
}
}
else
{
document.getElementById("statusTxt").innerHTML="正在读取数据中……";
}
}
function processRequest2()
{
if (http_request.readyState == 4)
{
if (http_request.status == 200)
{
document.getElementById("statusTxt").innerHTML="";
addOptionGroup("city",http_request.responseText);
}
else
{
alert("您所请求的页面有异常。");
}
}
else
{
document.getElementById("statusTxt").innerHTML="正则读取数据中……";
}
}
function loadProvince()
{
send_request("select.asp?action=province",1);
}
function loadCity()
{
send_request("select.asp?action=city&id="+document.getElementById("province").value,2);
}
function addOption(objSelectNow,txt,val)
{
var objOption = document.createElement("OPTION");
objOption.text= txt;
objOption.value=val;
objSelectNow.options.add(objOption);
}
function addOptionGroup(selectId,optGroupString)
{
var optGroup = optGroupString.split(",");
var objSelect = document.getElementsByTagName("SELECT");
var objSelectNow = objSelect[selectId];
objSelectNow.length = 1;
for (i=1; i<optGroup.length; i++)
{
if(optGroup[i]!="")
{
var opt = optGroup[i].split("|");
addOption(objSelectNow, opt[0], opt[1]);
}
}
}

select.asp
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<%
Set oConn = Server.CreateObject("ADODB.Connection")
oConn.Open "Provider=Microsoft.Jet.OLEDB.4.0; Data Source="& Server.MapPath("1.mdb")
Set oRs = Server.CreateObject( "ADODB.Recordset" )
action = Request.QueryString("action")
Response.Charset="gb2312"
response.Write("请选择|-1,")
if action = "province" then
sql = "select * from class where parentid =0"
oRs.open sql,oConn,1,3
if not (oRs.eof or oRs.bof) then
while not oRs.eof
Response.Write oRs("classname")&"|"&oRs("id")&","
oRs.movenext
wend
end if
oRs.close
elseif action = "city" then
sql = "select * from class where parentid =" &Request.QueryString("id")
oRs.open sql,oConn,1,3
if not (oRs.eof or oRs.bof) then
while not oRs.eof
Response.Write oRs("classname")&"|"&oRs("id")&","
oRs.movenext
wend
end if
oRs.close
else
response.Write("程序出错")
end if
oConn.close
%>

转载于:https://www.cnblogs.com/mywap/archive/2011/11/17/2252249.html

weixin_33834628

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用AJAX+ASP实现的两级联动下拉菜单

以前在实现两级联动下拉菜单的时候，要么不断的刷新，要么是在页面载入时下载所有栏目，用JAVASCRIPT来控制。现在有了更好的选择：AJAX。index.htm<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d...
复制链接

扫一扫