📄 category.asp
字号:
<%
Dim conn,rs
Dim connstr
Dim sqlCmd
'创建数据库连接对象并打开
set conn=server.createobject("adodb.connection")
connstr="Provider=Microsoft.jet.oledb.4.0;data source=" & server.mappath("data.mdb")
conn.open connstr
'用于从数据库中获取数据的sql语句
sqlCmd="select id,name from category where level=0"
'创建数据集对象
set rs=conn.execute(sqlCmd)
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>二级菜单示例</title>
</head>
<body>
<form name="form1">
<select name="select1" onchange="getLevel2()">
<option value="0">请选择一级分类：</option>
<%
'遍历记录集生成下拉菜单选项
while not rs.eof
Response.write("<option value='" & rs("id") & "'>")
Response.write(rs("name"))
Response.write("</option>")
rs.movenext
wend
'关闭数据库连接及记录集，释放资源
rs.close
conn.close
set rs=nothing
set conn=nothing
%>
</select>
<select name="select2">
<option value="0">请选择二级分类：</option>
</select>
</form>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!--
//cache用于存储已经获取的数据
var cache=[];
function getLevel2(){
if(document.forms.form1.select1.selectedIndex==0){
//当一级菜单未选中时，二级菜单仅保留提示项
document.forms.form1.select2.length=1;
return;
}
//如果当前二级分类没有被缓存，则从服务器端获取
if(!cache[document.forms.form1.select1.selectedIndex]){
//建立跨浏览器的XMLHttpRequest对象
var xmlhttp;
try{
xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
try{
xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
try{
xmlhttp= new XMLHttpRequest();
}catch(e){}
}
}
//创建请求，并使用escape对userName编码，以避免乱码
xmlhttp.open("get","ajax.asp?id="+document.forms.form1.select1.value);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
cache[document.forms.form1.select1.selectedIndex]=eval("("+unescape(xmlhttp.responseText)+")");
//获取成功后重新调用getLevel2，将数据填充到下拉框，如果直接在这里写会造成代码重复
getLevel2();
}else{
alert("网络失败。");
}
}
}
xmlhttp.send(null);
//必须在这里返回，等待回调
return;
}
//此时已经确保缓存不为空
document.forms.form1.select2.length=1;
var _arr=cache[document.forms.form1.select1.selectedIndex];
for(var i=0;i<_arr.length-1;i+=2){
with(document.forms.form1.select2){
options[options.length]=new Option(_arr[i],_arr[i+1]);
}
}
}
//-->
</script>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -