基於ASP+AJax和數據庫驅動的二級聯動菜單,需要的朋友可以參考下。
index.ASP 頁面代碼
<!--#include file="conn.ASP" -->
<%
set cmd = conn.execute("select bigclassid,bigclassname from bigclass")
tempid=cmd("bigclassid")
%>
<select name="menu" onChange="getsubcategory(this.value);">
<%
if not cmd.eof then
do while not cmd.eof
bigclassid= cmd("bigclassid")
bigclassname = cmd("bigclassname")
%>
<option value="<%=bigclassid%>"><%=bigclassname%></option>
<%
cmd.movenext
loop
end if
cmd.close
set cmd = nothing
%>
</select>
<div id="subclass">
<select name="submenu">
<%
set cxd = conn.execute("select * from smallclass where bigclassid=" & tempid)
if not cxd.eof then
do while not cxd.eof
smallclassid= cxd("smallclassid")
smallclassname = cxd("smallclassname")%>
<option value="<%=smallclassid%>"><%=smallclassname%></option>
<%
cxd.movenext
loop
cxd.close
set cxd = nothing
else
Html = "<select name='smallclassid'><option value='0' selected>暫無小類</option></select>"
response.write Html
end if
%>
</select>
</div>
AJax.JS 代碼
// JavaScript Document
function createXMLhttp()
{
XMLhttpobj = false;
try{
xmlhttpobj = new XMLHttpRequest;
}catch(e){
try{
xmlhttpobj=new ActiveXObject("MSXML2.XMLHTTP");
}catch(e2){
try{
xmlhttpobj=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e3){
XMLhttpobj = false;
}
}
}
return XMLhttpobj;
}
function getsubcategory(bigclassid){
if(bigclassid==0){
document.getElementById("subclass").innerHtml="<select name='smallclassid'><option value='0' selected>選擇二級分類</option></select>";
return;
};
var xmlhttpobj = createXMLhttp();
if(xmlhttpobj){//如果創建對象XMLhttpobj成功
XMLhttpobj.onreadystatechange=handle;
XMLhttpobj.open('get',"getsubcategory.ASP?bigclassid="+bigclassid+"&number="+Math.random(),true);//get方法 加個隨機數。
XMLhttpobj.send(null);
}
}
function handle(){//客戶端監控函數
//if(XMLhttpobj.readystate==4){//服務器處理請求完成
if(XMLhttpobj.status==200){
//alert('ok');
var Html = XMLhttpobj.responseText;//獲得返回值
document.getElementById("subclass").innerHTML=Html;
}else{
document.getElementById("subclass").innerHtml="對不起，您請求的頁面有問題...";
}
//}
//else{
//document.getElementById("subclass").innerHtml=XMLhttpobj.readystate;//服務器處理中
//}
//}
}
getsubcategory.ASP 代碼
<%@language="vbscript" codepage="936"%>
<!--#include file="conn.ASP"-->
<%
response.charset="gb2312"
bigclassid=safe(request.querystring("bigclassid"))
if bigclassid<>"" then
set re=new regexp
re.ignorecase=true
re.global=false
re.pattern = "^[0-9]{1,3}$"
if not re.test(bigclassid) then
response.write "非法參數"
response.end
end if%>
<%on error resume next
set p = conn.execute("select * from smallclass where bigclassid=" & bigclassid)
if err then
err.clear
response.write "查詢出錯"
response.end
end if
if not p.eof then
Html = "<select name='select2'>"&vbnewline
do while not p.eof
html = Html&"<option value='"&p("smallclassid")&"'>"&p("smallclassname")&"</option>"&vbnewline
p.movenext
loop
html = Html&"</select>"
else
Html = "<select name='smallclassid'><option value='0' selected>暫無小類</option></select>"
end if
p.close
set p = nothing
conn.close
set conn = nothing
response.write Html
Html = ""
end if
%>
