dom加xml的三级联动源码

最新推荐文章于 2024-04-25 23:48:43 发布

hanxiaoshuang321123

最新推荐文章于 2024-04-25 23:48:43 发布

阅读量5.1k

点赞数

文章标签： xml function stylesheet 浏览器 html 文档

本文链接：https://blog.csdn.net/hanxiaoshuang123/article/details/7285660

版权

dom加xml的三级联动源码

找了半天的bug，那么长时间，郁闷死了，晚上都没有睡好觉。就一个最简单的buy，不是某个单词写的不对，而是命名重复！！！！！！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>example01.html</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=GBK">
        
    </head>
    <body>
        
        <div align="center">
            <div id="data">
                <select id="province">
                    <option>请选择省</option>
                </select>
                <select id="city">
                    <option>请选择市</option>
                </select>
                <select id="country">
                    <option>请选择县</option>
                </select>
            </div>
        </div>
    </body>
</html>
<script type="text/javascript">

    window.onload = function(){

        var xmlDoc = parseXml("/day01/cities.xml");

        //获取省 xml
        var provinceNodes = xmlDoc.getElementsByTagName("province");

        var cityNodes = xmlDoc.getElementsByTagName("city");
        //alert(cityNodes.length);

        //添加省的节点
        var provinceNode = document.getElementById("province");

        //获取市的节点
        var citiesHtmlNode = document.getElementById("city");

        // 添加县的节点
        var countryNode = document.getElementById("country");
        //alert(countryNode);


        for (var i = 0; i < provinceNodes.length; i++) {
            //创建option html
            var optionNode = document.createElement("option");

            //获取省的名称
            var value = provinceNodes[i].getAttribute("name");


            //为option添加文本节点   值为省的name属性值
            optionNode.appendChild(document.createTextNode(value));

            optionNode.setAttribute("value", value); //为添加的option设置值
            //添加到节点中
            provinceNode.appendChild(optionNode);
        }


        //添加市
        provinceNode.onchange = function(){
            //清空原有的的节点
            //获取清空的select里面的所有的option对象
            var cityHtmlOptionNodes = citiesHtmlNode.getElementsByTagName("option");//获取的是所有的option
            //获取长度
            var len = cityHtmlOptionNodes.length;
            for (var m = 0; m < len; m++) {
                //看是否有第一个对象，【1】代表的第二个对象，如果不为空
                if (cityHtmlOptionNodes[1]) {
                    //始终移除第二个对象
                    citiesHtmlNode.removeChild(cityHtmlOptionNodes[1]);
                }
            }


            //添加市的名称
            for (var i = 0; i < provinceNodes.length; i++) {
                //判断点击的是否是value
                if (this.value == provinceNodes[i].getAttribute("name")) {
                    //通过省节点来找到city节点对象
                    var citiesNode = provinceNodes[i].getElementsByTagName("city");
                    alert(citiesNode.length);
                    //遍历city到city的select中
                    for (var j = 0; j < citiesNode.length; j++) {
                        //alert(citiesNode.length);
                        var cityOptionNode = document.createElement("option");
                        //为创建的option对象添加文本
                        var value = citiesNode[j].firstChild.nodeValue;
                        //alert(value);
                        cityOptionNode.appendChild(document.createTextNode(value));
                        //把创建的对象添加到city中
                        citiesHtmlNode.appendChild(cityOptionNode);
                    }
                }
            }
        }


        //添加县
        citiesHtmlNode.onchange = function(){

            //删除元素
            //或得到option的元素来删除
            var optionNodes = countryNode.getElementsByTagName("option");
            var len = optionNodes.length;
            for (var m = 0; m < len; m++) {
                if (optionNodes[1]) {
                    countryNode.removeChild(optionNodes[1]);
                }
            }


            for (var i = 0; i < cityNodes.length; i++) {
                // alert(cityNodes.length);
                //判断点击的是否是value
                if (this.value == cityNodes[i].getAttribute("name")) {
                    //alert(this.value.length);
                    //通过省节点来找到city节点对象
                    var countryNodes = cityNodes[i].getElementsByTagName("country");
                    //alert(countryNode.length);
                    //遍历city到city的select中
                    for (var j = 0; j < countryNodes.length; j++) {
                        // alert(countryNode.length);
                        var countryOptionNode = document.createElement("option");
                        //为创建的option对象添加文本
                        var value = countryNodes[j].firstChild.nodeValue;
                        //alert(value);
                        countryOptionNode.appendChild(document.createTextNode(value));
                        //把创建的对象添加到city中
                        countryNode.appendChild(countryOptionNode);
                    }
                }
            }
        }
    }

    //用js解析xml文件
    /*
     * html文档是document文档对象节点
     * xml 文件需要创建
     * 根据不同的浏览器有不同的创建方式
     * 在IE中需要一个空间名称来创建
     * @param {Object} id
     */
    //解析xml文档
    function parseXml(filename){

        var xmlDoc;
        try {
            //IE浏览器
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        }
        catch (e) {
            try {
                //非IE浏览器
                xmlDoc = document.implementation.createDocument("", "", null);
            }
            catch (ex) {
                alert("你使用的是不是浏览器呀！");
            }
        }


        //解析的时候是异步还是同步,设置为false，是关闭异步加载，这样确保在文档完全加载之前不会继续脚本的执行
        xmlDoc.async = false;
        xmlDoc.load(filename);

        return xmlDoc;
    }
</script>

xml文件：

<?xml version="1.0" encoding="GBK"?>
<china>
<province name="河北">
  <city name="石家庄">石家庄
   <country>文安县</country>
   <country>固安县</country>
   <country>魏县</country>
  </city>
  <city name="廊坊">廊坊
   <country>文安县</country>
   <country>固安县</country>
   <country>魏县</country>
  </city>
  <city name="保定">保定
   <country>徐水县</country>
   <country>涿州县</country>
   <country>魏县</country>
  </city>
  <city name="邢台">邢台
   <country>巨鹿县</country>
   <country>宁晋县</country>
   <country>隆尧县</country>
  </city>
  <city name="沧州">沧州
   <country>巨鹿县</country>
   <country>宁晋县</country>
   <country>隆尧县</country>
  </city>
  <city name="衡水">衡水
   <country>巨鹿县</country>
   <country>宁晋县</country>
   <country>隆尧县</country>
  </city>
</province>
<province name="北京">
  <city>朝阳</city>
  <city>海淀</city>
</province>
<province name="河南">
  <city>开封</city>
  <city>商丘</city>
  <city>驻马店</city>
  <city>平顶山</city>
  <city>洛阳</city>
  <city>郑州</city>
</province>
<province name="安徽">
  <city>阜阳</city>
  <city>亳州</city>
  <city>合肥</city>
</province>