XML数据文件：
mselect.xml
<?xml version="1.0" encoding="GB2312" ?>
<Troot>
<Item id="1" pid="0" c="1">大学</Item>
<Item id="2" pid="0" c="3">中学</Item>
<Item id="3" pid="0" c="3">小学</Item>
<Item id="4" pid="2" c="2">高中</Item>
<Item id="5" pid="2" c="5">初中</Item>
<Item id="6" pid="15" c="3">清华大学</Item>
<Item id="7" pid="15" c="4">北京大学</Item>
<Item id="8" pid="5" c="3">天津铁三中</Item>
<Item id="9" pid="4" c="3">天津市二中</Item>
<Item id="10" pid="16" c="2">天津音乐学院</Item>
<Item id="11" pid="15" c="5">天津商学院</Item>
<Item id="12" pid="4" c="3">耀华中学</Item>
<Item id="13" pid="3" c="6">昆纬路小学</Item>
<Item id="14" pid="2" c="6">七中</Item>
<Item id="15" pid="1" c="1">综合类院校</Item>
<Item id="16" pid="1" c="1">艺术类院校</Item>
<Item id="17" pid="15" c="4">医科大学</Item>
<Item id="18" pid="15" c="4">天津师范大学</Item>
<Item id="19" pid="15" c="23">天津大学</Item>
<Item id="20" pid="15" c="7">南开大学</Item>
<Item id="21" pid="4" c="23">天津铁一中</Item>
<Item id="22" pid="5" c="5">天津铁一中</Item>
<Item id="23" pid="3" c="3">天津市铁路职工子弟第三小学</Item>
<Item id="24" pid="3" c="3">天津市铁路职工子弟第一小学</Item>
<Item id="25" pid="16" c="3">美术学院</Item>
<Item id="26" pid="16" c="3">体育学院</Item>
</Troot>
mselect.htm
<HTML>
<HEAD>
<TITLE>XML版本的多级联动</TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
/***********************************************
//
// 用DOM实现：基于XML的动态N级联动
//
//**********************************************/
// 最终版权归 DSclub（任兀）拥有，您可以在未授权的情况下使用，但请保留此信息
//
// EMail：dsclub@hotmail.com
// QQ：9967030
// Nick Name: DSclub(兀儿－干部)
// 姓名：任兀
// 多级联动的Select集合
var objSelects = new Array();
// 创建应有的Select对象
function funCreateSelectEl(passPid)
{
// 创建DOMDocument对象
var xmlSrc = new ActiveXObject("MicroSoft.XMLDOM");
xmlSrc = xmlSource.XMLDocument;
// root为文档对象的根节点
var root = xmlSrc.documentElement;
// 得到所传父ID的所有节点
var currentItems = root.selectNodes("//Troot/Item[@pid = " + passPid + "]");
var iItems = currentItems.length;
if(iItems > 0)
{
// 创建Select并把OnChange事件写好
var newChild = document.createElement("<SELECT onchange='eventSltChange()' id='slt" + objSelects.length + "'>");
// 向集合中添加新建的Select对象
objSelects[objSelects.length] = newChild;
// 向Select对向添加所有的Option
var i;
for(i = 0; i < iItems; i++)
{
var oOption = document.createElement("OPTION");
oOption.text = currentItems[i].text;
oOption.value = currentItems[i].attributes[0].text;
newChild.options.add(oOption);
}
// 将新建的Select放到目标上
oDIV.appendChild(newChild);
// 先置一个空白空值
newChild.value = "";
}
}
// Select的OnChange事件响应函数
function eventSltChange()
{
// 删除全部本层下的孩子
var i;
for(i = objSelects.length - 1; i > parseInt(event.srcElement.id.replace("slt",""), 10); i--)
{
oDIV.removeChild(objSelects[i]);
objSelects.pop();
}
// 响应新的选择
funCreateSelectEl(event.srcElement.value);
// 联动的选择结果
var resultArray = new Array();
for(i = 0; i < objSelects.length; i++)
{
resultArray[i] = objSelects[i].value;
}
// 输出选定
OUTPUT.innerText = resultArray.join("-");
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="funCreateSelectEl(0)">
<DIV ID="oDIV"></DIV>
<XML ID="xmlSource" src="mselect.xml"/>
<BR/>
选定结果：<SPAN ID="OUTPUT"></SPAN>
</BODY>
</HTML>
把mselect.xml和mselect.htm保存到同一目录，IE运行mselect.htm。
mselect.xml
<?xml version="1.0" encoding="GB2312" ?><Troot> <Item id="1" pid="0" c="1">大学</Item> <Item id="2" pid="0" c="3">中学</Item> <Item id="3" pid="0" c="3">小学</Item> <Item id="4" pid="2" c="2">高中</Item> <Item id="5" pid="2" c="5">初中</Item> <Item id="6" pid="15" c="3">清华大学</Item> <Item id="7" pid="15" c="4">北京大学</Item> <Item id="8" pid="5" c="3">天津铁三中</Item> <Item id="9" pid="4" c="3">天津市二中</Item> <Item id="10" pid="16" c="2">天津音乐学院</Item> <Item id="11" pid="15" c="5">天津商学院</Item> <Item id="12" pid="4" c="3">耀华中学</Item> <Item id="13" pid="3" c="6">昆纬路小学</Item> <Item id="14" pid="2" c="6">七中</Item> <Item id="15" pid="1" c="1">综合类院校</Item> <Item id="16" pid="1" c="1">艺术类院校</Item> <Item id="17" pid="15" c="4">医科大学</Item> <Item id="18" pid="15" c="4">天津师范大学</Item> <Item id="19" pid="15" c="23">天津大学</Item> <Item id="20" pid="15" c="7">南开大学</Item> <Item id="21" pid="4" c="23">天津铁一中</Item> <Item id="22" pid="5" c="5">天津铁一中</Item> <Item id="23" pid="3" c="3">天津市铁路职工子弟第三小学</Item> <Item id="24" pid="3" c="3">天津市铁路职工子弟第一小学</Item> <Item id="25" pid="16" c="3">美术学院</Item> <Item id="26" pid="16" c="3">体育学院</Item></Troot>mselect.htm
<HTML><HEAD><TITLE>XML版本的多级联动</TITLE><SCRIPT LANGUAGE=javascript><!--/***********************************************//// 用DOM实现：基于XML的动态N级联动////**********************************************/// 最终版权归 DSclub（任兀）拥有，您可以在未授权的情况下使用，但请保留此信息//// EMail：dsclub@hotmail.com// QQ：9967030// Nick Name: DSclub(兀儿－干部)// 姓名：任兀// 多级联动的Select集合var objSelects = new Array();// 创建应有的Select对象function funCreateSelectEl(passPid){// 创建DOMDocument对象var xmlSrc = new ActiveXObject("MicroSoft.XMLDOM");xmlSrc = xmlSource.XMLDocument;// root为文档对象的根节点var root = xmlSrc.documentElement;// 得到所传父ID的所有节点var currentItems = root.selectNodes("//Troot/Item[@pid = " + passPid + "]");var iItems = currentItems.length; if(iItems > 0)
{
// 创建Select并把OnChange事件写好 var newChild = document.createElement("<SELECT onchange='eventSltChange()' id='slt" + objSelects.length + "'>"); // 向集合中添加新建的Select对象 objSelects[objSelects.length] = newChild; // 向Select对向添加所有的Option var i; for(i = 0; i < iItems; i++) { var oOption = document.createElement("OPTION"); oOption.text = currentItems[i].text; oOption.value = currentItems[i].attributes[0].text; newChild.options.add(oOption); } // 将新建的Select放到目标上 oDIV.appendChild(newChild); // 先置一个空白空值 newChild.value = ""; }}// Select的OnChange事件响应函数function eventSltChange(){ // 删除全部本层下的孩子 var i; for(i = objSelects.length - 1; i > parseInt(event.srcElement.id.replace("slt",""), 10); i--) { oDIV.removeChild(objSelects[i]); objSelects.pop(); } // 响应新的选择 funCreateSelectEl(event.srcElement.value); // 联动的选择结果 var resultArray = new Array(); for(i = 0; i < objSelects.length; i++) { resultArray[i] = objSelects[i].value; } // 输出选定 OUTPUT.innerText = resultArray.join("-");}//--></SCRIPT></HEAD><BODY onload="funCreateSelectEl(0)"><DIV ID="oDIV"></DIV><XML ID="xmlSource" src="mselect.xml"/><BR/>选定结果：<SPAN ID="OUTPUT"></SPAN></BODY></HTML>把mselect.xml和mselect.htm保存到同一目录，IE运行mselect.htm。
