js+xml实现三级联动菜单

最新推荐文章于 2018-07-26 11:15:26 发布

lianzy

最新推荐文章于 2018-07-26 11:15:26 发布

阅读量1.6k

点赞数

分类专栏： XML 文章标签： xml c function javascript encoding 体育

本文链接：https://blog.csdn.net/lianzy/article/details/437566

版权

XML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>

test.html
<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 οnchange='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 οnlοad="funCreateSelectEl(0)">
<DIV ID="oDIV"></DIV>
<XML ID="xmlSource" src="mselect.xml"/>
<BR/>
选定结果：<SPAN ID="OUTPUT"></SPAN>
</BODY>
</HTML>

lianzy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js+xml实现三级联动菜单

mselect.xml 大学中学小学高中初中清华大学北京大学天津铁三中天津市二中天津音乐学院天津商学院耀华中学昆纬路小学七中综合类院校艺术类院校医科大学天津师范大学天津大学南开大学天津铁一中天津铁一中天津市铁路职工子弟
复制链接

扫一扫