<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AJAX二级联动菜单corange.cn</title>
<script src="prototype.js" type="text/javascript"></script>
<script>
//载入父级分类,当页面载入完成时即时触发这个函数
function loadCategoryParent()
{
var url = "load.asp"; //目标地址
var pars = "type=parent"; //参数
var Ajax_Parent = new Ajax.Request( //构建AJAX请求
url,
{
method: "get", //HTTP请求方式为get
parameters: pars, //请求时的参数
onComplete: completeAJAX_Parent //绑定onComplete的回调函数
});
}
//当完成读取父级分类后的处理函数
//传入变量originalRequest,Prototype库内部的xmlhttp对象
function completeAJAX_Parent(originalRequest)
{
//获取select控件
var sel = $("category_parent");
//删除当前控件中的所有选项
while (sel.length > 0) {
sel.remove(sel.length - 1);
}
//获取xml文档对象oXMLDocument
var oXMLDocument = originalRequest.responseXML.documentElement;
//如果服务器段处理出现异常,则处理异常
if(oXMLDocument.nodeName=='error')
{
addSelectElement(sel,
oXMLDocument.childNodes[0].nodeValue, //异常信息
''
)
return;
}
addSelectElement(sel,
'请选择父分类...',
'')
//如果没有异常那么则遍历xml对象，并调用addSelectElement函数增加option选项控件
for(var i=0;i<oXMLDocument.childNodes.length;i++)
{
addSelectElement(sel,
oXMLDocument.childNodes[i].childNodes[0].nodeValue, //option控件文本
oXMLDocument.childNodes[i].attributes[0].value //option控件值
)
}
//使当前的父分类的select控件可用
sel.disabled=false;
}
//读取子分类,当父分类的select控件变化的时候触发
//传入变量lngParentID为父分类的编号
function loadCategoryChild(lngParentID)
{
//获取select控件
var sel = $("category_child");
//删除当前控件中的所有选项
while (sel.length > 0) {
sel.remove(sel.length - 1);
}
//使当前子分类的select控件不可用
sel.disabled=true;
//显示“载入中...”字样
addSelectElement(sel,
'载入中...',
''
)
var url = "load.asp"; //目标地址
var pars = "type=child&ParentID=" + lngParentID;//参数
var Ajax_Child = new Ajax.Request( //构建AJAX请求
url,
{
method: "get", //HTTP请求方式为get
parameters: pars, //请求时的参数
onComplete: completeAJAX_Child //绑定onComplete的回调函数
});
}
//当完成读取子分类后的处理函数
function completeAJAX_Child(originalRequest)
{
//获取select控件
var sel = $("category_child");
//删除当前控件中的所有选项
while (sel.length > 0) {
sel.remove(sel.length - 1);
}
//获取xml文档对象oXMLDocument
var oXMLDocument = originalRequest.responseXML.documentElement;
//如果服务器段处理出现异常,则处理异常
if(oXMLDocument.nodeName=='error')
{
addSelectElement(sel,
oXMLDocument.childNodes[0].nodeValue, //异常信息
''
)
return;
}
//如果没有异常那么则遍历xml对象，并调用addSelectElement函数增加option选项控件
for(var i=0;i<oXMLDocument.childNodes.length;i++)
{
addSelectElement(sel,
oXMLDocument.childNodes[i].childNodes[0].nodeValue, //option控件文本
oXMLDocument.childNodes[i].attributes[0].value //option控件值
)
}
//使当前子分类的select控件可用
sel.disabled=false;
}
//用于向已经存在的select控件增加选项的函数
//传入变量objSelect,目的select控件
//传入变量strOptionText,option选项控件的文本
//传入变量strOptionValue,option选项控件的值
function addSelectElement(objSelect,strOptionText,strOptionValue)
{
if(typeof objSelect=='object') //如果objSelect控件为object型
{
var opt = document.createElement("option"); //创建option元素
opt.text = strOptionText //设定option元素的文本为strOptionText
opt.value = strOptionValue //设定option元素的值为strOptionValue
objSelect.add(opt); //将创建的元素附加到指定的select控件中
}
}
//绑定事件,当页面完全载入后执行函数loadCategoryParent()
window.onload=loadCategoryParent()
</script>
</head>
<body>
<form id="frmTest" name="frmTest" method="post" action="" style="width:300px; font-size:12px">
<h2>AJAX二级联动菜单测试</h2>
<p><fieldset>
<legend>商品分类选择</legend>
<p>请选择大类：
<select name="category_parent" disabled="disabled" onchange="loadCategoryChild(this.value)">
<option>载入中...</option>
</select>
</p>
<p>请选择小类：
<select name="category_child" disabled="disabled">
<option>请先选择大类...</option>
</select>
</p>
</fieldset>
</p>
</form>
</body>
</html>
文件比较大，这里就不全部发出来，请有需要的朋友下载后测试
http://www.corange.cn//uploadfiles/code_66678.zip
