我是懒人,不想太动脑子,凡事挑简单的方法,javascript 写二级连动太长不说,记还不好记,数据和代码没有分离太多了,最近看到AJAX实现二级菜单,感觉不错,下面是从一位兄弟BLOG上看到的,他的代码有点冗余,我优化了下,并加上注释
test.xml如下
----
<?xml version="1.0" encoding="GB2312"?>
<item>
<class display="请选择省份">
<subclass display="">Not Available</subclass>
</class>
<class display="北京">
<subclass display="北京">city</subclass>
</class>
<class display="天津">
<subclass display="天津">city</subclass>
</class>
<class display="上海">
<subclass display="上海">city</subclass>
</class>
<class display="重庆">
<subclass display="重庆">city</subclass>
</class>
<class display="河北">
<subclass display="石家庄">city</subclass>
</class>
<class display="黑龙江">
<subclass display="哈尔滨">city</subclass>
<subclass display="齐齐哈尔">city</subclass>
</class>
<class display="吉林">
<subclass display="长春">city</subclass>
</class>
<class display="辽宁">
<subclass display="沈阳">city</subclass>
</class>
<class display="内蒙古">
<subclass display="呼和浩特">city</subclass>
</class>
<class display="山西">
<subclass display="太原">city</subclass>
</class>
<class display="陕西">
<subclass display="西安">city</subclass>
</class>
<class display="宁夏">
<subclass display="银川">city</subclass>
</class>
<class display="甘肃">
<subclass display="兰州">city</subclass>
</class>
<class display="新疆">
<subclass display="乌鲁木齐">city</subclass>
</class>
<class display="青海">
<subclass display="西宁">city</subclass>
</class>
<class display="西藏">
<subclass display="拉萨">city</subclass>
</class>
<class display="四川">
<subclass display="成都">city</subclass>
</class>
<class display="云南">
<subclass display="昆明">city</subclass>
</class>
<class display="贵州">
<subclass display="贵阳">city</subclass>
</class>
<class display="河南">
<subclass display="郑州">city</subclass>
</class>
<class display="山东">
<subclass display="济南">city</subclass>
</class>
<class display="安徽">
<subclass display="合肥">city</subclass>
</class>
<class display="湖北">
<subclass display="武汉">city</subclass>
</class>
<class display="湖南">
<subclass display="长沙">city</subclass>
</class>
<class display="江苏">
<subclass display="南京">city</subclass>
</class>
<class display="浙江">
<subclass display="杭州">city</subclass>
</class>
<class display="江西">
<subclass display="南昌">city</subclass>
</class>
<class display="福建">
<subclass display="福州">city</subclass>
</class>
<class display="广东">
<subclass display="广州">city</subclass>
</class>
<class display="广西">
<subclass display="南宁">city</subclass>
</class>
<class display="海南">
<subclass display="海口">city</subclass>
</class>
<class display="台湾">
<subclass display="台北">city</subclass>
</class>
<class display="香港">
<subclass display="香港">city</subclass>
</class>
<class display="澳门">
<subclass display="澳门">city</subclass>
</class>
</item>
-------------
test.htm
<html>
<head>
<script language="JavaScript" for="window" event="onload">
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
//创建 XML文档对象
var i=0;
var j=0;
loadXML();
function loadXML()
{
xmlDoc.async="false";
//非异步
xmlDoc.load("test.xml");
//载入xml
xmlObj=xmlDoc.documentElement;
nodes = xmlObj.childNodes;
//一级孩子节点
document.frm.mainclass.options.length = 0;
document.frm.subclass.options.length = 0;
for (i=0;i<nodes.length;i++)
{
labels=xmlObj.childNodes(i).getAttribute("display");
//靠属性取得值
values=xmlObj.childNodes(i).text;
document.frm.mainclass.add(document.createElement("OPTION"));
//增加option 标签
document.frm.mainclass.options[i].text=labels;
document.frm.mainclass.options[i].value=values;
}
}
</script>
<script language="JavaScript" >
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
var i=0;
var j=0;
function setsubclass(main)
{
var is_selected="N";
if (document.frm.subclass.options.length!=0)
{
for (i=0;i<=document.frm.subclass.options.length;i++)
{
document.frm.subclass.options[i]=null ;
document.frm.subclass.options.remove(i);
//移除
}
}
for (i=0;i<xmlObj.childNodes.length;i++)
{
var values="";
var lables="";
if (is_selected=="Y") return;
labels=xmlObj.childNodes(i).getAttribute("display");
values=xmlObj.childNodes(i).text;
if (labels==main)
{
is_selected="Y";
for (j=0;j<xmlObj.childNodes(i).childNodes.length;j++)
{
labels=xmlObj.childNodes(i).childNodes(j).getAttribute("display");
//取二级孩子节点属性
values=xmlObj.childNodes(i).childNodes(j).text;
document.frm.subclass.add(document.createElement("OPTION"));
document.frm.subclass.options[j].text=labels;
document.frm.subclass.options[j].value=values;
}
}
}
}
</script>
<title>在HTML中调用XML数据</title>
</head>
<body bgcolor="#FFFFFF">
<FORM NAME="frm">
类型<SELECT NAME="mainclass" OnChange='setsubclass(this[selectedIndex].text)'></SELECT>
<option selected value="" ></option>
子类<SELECT NAME="subclass"></SELECT>
</form>
</body>
</html>
这个是test