这是上一篇文章同一个文件的改进版本，增加了对火狐浏览器的支持！支持多浏览器真不容易，这帮开发软件的，都根本不考虑程序员的感受。
希望此版本能再次帮到用的到的朋友们！！！
大家一起改进一起完善。如果您将此程序修改后，觉得还不错，感谢您回发一份给兄弟我。在这里感谢了。
这个现在是比较通用的程序，其实这是针对ASP开发的，有部分功能已经删除。因为刻意模仿了Alibaba.com和Hc360.com商务频道的效果，所以，删除了标准的效果，还有个功能主要针对具体应用中，编辑信息时所使用的（参杂了一些ASP(VBScript)相关的代码）。同时放上来，影响此程序的阅读，同时也不太通用，等有时间的时候，将完善一点的完整的（包括信息添加时使用和编辑时使用的全都弄上来。呵呵……）程序都发上来。
其实相关文件还有很多，呵呵……刚想起来，分类添加、修改、删除程序（我是先写到数据库中，然后生成的XML文件），XML文件的生成文件，总不能手动填写吧？呵呵……但，我那个程序不是很理想，如果数据量大，也就是分类多的时候，可能会脚本超时，要是哪位朋友写个比较好的生成XML的程序，感谢你发给兄弟一份！！
泡泡ASP相关代码：
<!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>基于XML的三级联动菜单[IE和FF]</title>
</head>
<body>
<script language="javascript">
<!--
/*********************************************
基于XML的三级联动菜单[支持多浏览器]
叶随风(LeafinWind)
QQ：19855466
Email：leafinwind_ljf@163.com
http://www.popasp.com/
测试环境：
系统：Windows2003
浏览器：IE6、FreFox、Opera、GreenBrowser
********************************************/
//var ff=(typeof document.implementation!='undefined')&&(typeof document.implementation.createDocument!='undefined');
var ie=(typeof window.ActiveXObject!='undefined');
if(ie)
{
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
window.onload = showClass1;
xmlDoc.load("ClassInfo.xml");
}
else
{
var xmlDoc=document.implementation.createDocument("","",null)
xmlDoc.onload = showFFClass1;
xmlDoc.load("ClassInfo.xml");
}
if(document.implementation && document.implementation.createDocument)
{
if( document.implementation.hasFeature("XPath", "3.0") )
{
XMLDocument.prototype.selectNodes = function(cXPathString, xNode)
{
if(!xNode) {xNode = this;}
var oNSResolver = this.createNSResolver(this.documentElement)
var aItems = this.evaluate(cXPathString, xNode, oNSResolver,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)
var aResult = [];
for( var i = 0; i < aItems.snapshotLength; i++)
{
aResult[i] = aItems.snapshotItem(i);
}
return aResult;
}
Element.prototype.selectNodes = function(cXPathString)
{
if(this.ownerDocument.selectNodes)
{
return this.ownerDocument.selectNodes(cXPathString, this);
}
else{throw "For XML Elements Only";}
}
}
if( document.implementation.hasFeature("XPath", "3.0") )
{
XMLDocument.prototype.selectSingleNode = function(cXPathString, xNode)
{
if( !xNode ) { xNode = this; }
var xItems = this.selectNodes(cXPathString, xNode);
if( xItems.length > 0 )
{
return xItems[0];
}
else
{
return null;
}
}
Element.prototype.selectSingleNode = function(cXPathString)
{
if(this.ownerDocument.selectSingleNode)
{
return this.ownerDocument.selectSingleNode(cXPathString, this);
}
else{throw "For XML Elements Only";}
}
}
}
//FF列表1
function showFFClass1()
{
var selectIndex = 0;
var firstValue = 0;
var xmlNodes = xmlDoc.getElementsByTagName("Class1");
for(i = 0;i <xmlNodes.length;i++)
{
//创建一个select的option元素
var selectOption = document.createElement("option");
//设置option元素的value属性为Class1节点的ID属性的值
selectOption.value = xmlNodes[i].getAttribute("ID");
//设置option元素显示的信息为Class1节点的ClassName属性的值
selectOption.text = xmlNodes[i].getAttribute("ClassName");
//获取默认显示的option的选中索引值
if (firstValue == selectOption.value) selectIndex = i;
//向表单中名字(id)为Class1的select对象追加新的Opiton元素
document.getElementById("Class1").options.add(selectOption);
}
}
//IE列表1
function showClass1()
{
var selectIndex = 0;
var firstValue = 0;
//IE下定位根元素下的子节点(Class1)
var xmlNodes = xmlDoc.documentElement.selectSingleNode("ClassInfos").childNodes;
//遍历所有节点(每一个Class1)
for(var i = 0; i < xmlNodes.length; i++)
{
var selectOption = document.createElement("option");
selectOption.value = xmlNodes[i].getAttribute("ID");
selectOption.text = xmlNodes[i].getAttribute("ClassName");
if (firstValue == selectOption.value) selectIndex = i;
document.getElementById("Class1").options.add(selectOption);
}
//document.getElementById("Class1").selectedIndex = selectIndex; //索引定位，用于修改信息时使用
//showClass2(1); //初始化二级(Class2)下拉列表
}
//列表2
function showClass2(isFirst)
{
var selectIndex = 0;
//判断是不是第一次初始化列表
if(isFirst == 1) var firstValue = 0;
//移除原来列表数据
document.getElementById("Class2").options.length = 0;
document.getElementById("Class3").options.length = 0;
//获取类别一选中的索引值
var ClassIndex = document.getElementById("Class1").selectedIndex;
//获得第一个类别当前值
var selectValue = document.getElementById("Class1").options[ClassIndex].value;
//查找对应的满足条件的下一层次的数据
var updateNodes = xmlDoc.documentElement.selectNodes("//Class1[@ID='" + selectValue + "']/Class2");
for(var i = 0; i < updateNodes.length; i++)
{
var selectOption = document.createElement("option");
selectOption.value = updateNodes[i].getAttribute("ID");
selectOption.text = updateNodes[i].getAttribute("ClassName");
if (firstValue == selectOption.value) selectIndex = i;
document.getElementById("Class2").options.add(selectOption);
}
}
//列表3
function showClass3(isFirst)
{
var selectIndex = 0;
if(isFirst == 1) var firstValue = 0;
document.getElementById("Class3").options.length = 0;
var ClassIndex = document.getElementById("Class2").selectedIndex;
var selectValue = document.getElementById("Class2").options[ClassIndex].value;
var updateNodes = xmlDoc.documentElement.selectNodes("//Class2[@ID='" + selectValue + "']/Class3");
for(var i = 0; i < updateNodes.length; i++)
{
var selectOption = document.createElement("option");
selectOption.value = updateNodes[i].getAttribute("ID");
selectOption.text = updateNodes[i].getAttribute("ClassName");
if (firstValue == selectOption.value) selectIndex = i;
document.getElementById("Class3").options.add(selectOption);
}
}
//-->
</script>
<style type="text/css">
div{float:left;}
</style>
<form name="form1" action="" method="post">
<div>一级：</div><div><select name="Class1" size="5" id="Class1" onchange="showClass2(0);" style="width:120px;height:90px;"></select></div>
<div>二级：</div><div><select name="Class2" size="5" id="Class2" onchange="showClass3(0);" style="width:120px;height:90px;"></select></div>
<div>三级：</div><div><select name="Class3" size="5" id="Class3" style="width:120px;height:90px;"></select></div>
<div><input type="submit" name="submit" value="提交" /></div>
</form>
</body>
</html> |
Xml文件（ClassInfo.xml）：
泡泡ASP相关代码：
<?xml version="1.0" encoding="gb2312" ?>
<ClassInfo>
<ClassInfos>
<Class1 ID="1" ClassName="辽宁省">
<Class2 ID="11" ClassName="沈阳市">
<Class3 ID="111" ClassName="和平区"></Class3>
<Class3 ID="112" ClassName="沈河区"></Class3>
<Class3 ID="113" ClassName="铁西区"></Class3>
</Class2>
<Class2 ID="12" ClassName="鞍山市">
<Class3 ID="121" ClassName="铁东区"></Class3>
<Class3 ID="122" ClassName="立山区"></Class3>
<Class3 ID="123" ClassName="铁西区"></Class3>
</Class2>
<Class2 ID="13" ClassName="营口市">
<Class3 ID="131" ClassName="站前区"></Class3>
<Class3 ID="132" ClassName="西市区"></Class3>
<Class3 ID="133" ClassName="老边区"></Class3>
</Class2>
</Class1>
<Class1 ID="2" ClassName="吉林省">
<Class2 ID="21" ClassName="长春市">
<Class3 ID="211" ClassName="a区"></Class3>
<Class3 ID="212" ClassName="b区"></Class3>
<Class3 ID="213" ClassName="c区"></Class3>
</Class2>
<Class2 ID="22" ClassName="吉林市">
<Class3 ID="221" ClassName="1区"></Class3>
<Class3 ID="222" ClassName="2区"></Class3>
<Class3 ID="223" ClassName="3区"></Class3>
</Class2>
</Class1>
<Class1 ID="3" ClassName="河北省">
<Class2 ID="31" ClassName="石家庄市"></Class2>
<Class2 ID="32" ClassName="唐山市">
<Class3 ID="321" ClassName="x区"></Class3>
<Class3 ID="322" ClassName="y区"></Class3>
<Class3 ID="323" ClassName="z区"></Class3>
</Class2>
</Class1>
<Class1 ID="4" ClassName="山东省">
<Class2 ID="41" ClassName="济南市"></Class2>
<Class2 ID="42" ClassName="青岛市">
<Class3 ID="421" ClassName="abc区"></Class3>
<Class3 ID="422" ClassName="bcd区"></Class3>
<Class3 ID="423" ClassName="cde区"></Class3>
</Class2>
</Class1>
</ClassInfos>
</ClassInfo> |
添加到百度搜藏
收藏到QQ书签