基于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
% >

 

转载于:https://www.cnblogs.com/spblue/archive/2010/05/04/1727484.html