Ajax+asp实现三级联动
广告：阿里云采购优惠专区
1.显示页面源码：
<%@LANGUAGE="VB" CODEPAGE="936"%>
<!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>
< http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>产品添加</title>
<link href="/images/haocss.css" rel="stylesheet" type="text/css" />
< language="Java" src="/js/Prototype.js" type="text/Java"></>
< language="java" type="text/java">
resetclass2()
{
form1.pclass2.length = 0;
form1.pclass2.options[0] = new Option("二级分类","");
form1.pclass2.options[0].selected=true;}
resetclass1()
{
form1.pclass1.length=0;
form1.pclass1.options[0] = new Option("请选择分类","");
}
resetclass3()
{
form1.pclass3.length = 0;
form1.pclass3.options[0] = new Option("三级分类","");
form1.pclass3.options[0].selected=true;}
Start_***(url,Action)
{
var myAjax = new Ajax.Request(url,{method:'get',parameters:Action,onComplete:***_Receive });
}
***_Receive(OriginalRequest)
{
if (OriginalRequest.responseText!= "" )
{
var temp;
var temp1
var temp2
var temp3
temp=OriginalRequest.responseText;
temp3=temp.substring(temp.indexOf(",")+1,temp.length)
temp=temp.substring(0,temp.indexOf(","))
var classtemp = new Array;
classtemp=temp.split("-");
var j=1
getElementById(temp3).options[0] = new Option("请选择","")
for (i=0;i<classtemp.length-1;i++)
{
temp1="";
temp2="";
temp1= classtemp[i].substring(0,classtemp[i].indexOf("$"));
temp2= classtemp[i].substring(classtemp[i].indexOf("$")+1,classtemp[i].length);
getElementById(temp3).options[j] = new Option(temp1,temp2);
j=j+1
}
}
}
</>
</head>
<body>
<div id=content>
<form name="form1" action="" method="post">
<h2>产品添加</h2>
<div id="hao"></div>
<ul>
<li><div class=addleft>产品分类：</div><div class=addright> 一级分类：<select onchange="Start_***('class/pclass_make.asp','formname=form1&bigclass=two&idname=pclass2&class1id='+this.options[this.selectedIndex].);" name="pclass1" id="pclass1" ><OPTION ="" ></OPTION></select> 二级分类：<select name="pclass2" id="pclass2" onchange="Start_***('class/pclass_make.asp','formname=form1&bigclass=three&idname=pclass3&class2id='+this.options[this.selectedIndex].);" ><OPTION ="" ></OPTION></select> 三级分类：<select name="pclass3" id="pclass3" ><OPTION ="" ></OPTION></select></div></li>
<li><div class=addleft>产品名称：</div><div class=addright> <input name="pname" type="text" ="" /></div></li>
<li><div class=addleft>产品规格：</div><div class=addright> <input name="psize" type="text" ="" /></div></li>
<li><div class=addleft>产品说明：</div><div class=addright> <input name="pcontent" type="text" ="" /></div></li>
<li><div class=addleft>产品备注：</div><div class=addright> <input name="premarks" type="text" ="" /></div></li>
<li><div class=addleft>产品价格：</div><div class=addright> <input name="price" type="text" ="" /></div></li>
<li><div class=addleft>小图片：</div><div class=addright> <input name="pic_s" type="text" ="" /></div></li>
<li><div class=addleft>大图片：</div><div class=addright> <input name="pic_b" type="text" ="" /></div></li>
</ul>
</form>
</div>
< language=JAVA>resetclass1();resetclass2();resetclass3();Start_***('class/pclass_make.asp','formname=form1&bigclass=one&idname=pclass1');</>
</body>
</html>
2.后台页面处理源码：
<%@LANGUAGE="VB" CODEPAGE="65001"%>
<%
if Session("adminuser")="" then
Response.Redirect "../login.asp"
end if%>
<!-- ＃i nclude file="../../inc/conn.asp" -->
<!-- ＃i nclude file="../../inc/.asp" -->
<%
dim class1id
dim class2id
dim class3id
dim formname
dim bigclass
dim idname
dim content
content=""
formname=haorep(request.querystring("formname"))
class1id=haorep(request.querystring("class1id"))
class2id=haorep(request.querystring("class2id"))
class3id=haorep(request.querystring("class3id"))
bigclass=haorep(request.querystring("bigclass"))
idname=haorep(request.querystring("idname"))
select case bigclass
case "one"
set rs=server.CreateObject("adodb.recordset")
rs.open "select class1id,class1name from pclass1 " ,conn,1,1
case "two"
set rs=server.CreateObject("adodb.recordset")
rs.open "select class2id,class2name from pclass2 where class1id=" & class1id & " " ,conn,1,1
case "three"
set rs=server.CreateObject("adodb.recordset")
rs.open "select class3id,class3name from pclass3 where class2id=" & class2id & " " ,conn,1,1
end select
'开始写入数据
i=0
do while not rs.eof
i=i+1
content=content & rs(1) & "$" & rs(0) & "-" '传输数据，以"-"分隔
rs.movenext
loop
content=content & "," & idname '加入idname标志，以","分隔
rs.close
set rs=nothing
conn.close
set conn=nothing
'写入完毕，输出内容
response.write content
response.end
%>
广告：阿里云新人采购专场
