用AJAX+ASP实现的两级联动下拉菜单-白红宇

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

阅读量：6221 次

发布时间：2019-06-21

本文共 3700 字，大约阅读时间需要 12 分钟。

以前在实现两级联动下拉菜单的时候，要么不断的刷新，要么是在页面载入时下载所有栏目，用JAVASCRIPT来控制。现在有了更好的选择：AJAX。

index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

</select>

</select>

</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

你可能感兴趣的文章

beanstalk源码剖析——概述

查看>>

[转] socket异步编程--libevent的使用

查看>>

linux下安装mysql详细步骤

查看>>

ASP.NET根据URL生成网页缩略图示例程序(C#语言)

Django rest_framework配合django_filter使用

查看>>

Windows下安装Python模块时环境配置

查看>>

Delphi 发展历史

查看>>

sharepoint2010 treeview实现

查看>>

转：为什么Maven Update Project JDK变回1.5

作业：实现简单的shell sed替换功能和修改haproxy配置文件

查看>>