JavaScript解析XML实现两级级联下拉列表_city.options[j].text = citys[i][j];-优快云博客

本文介绍了一种使用XML存储数据并通过HTML页面实现省市区三级级联选择框的方法。通过JavaScript操作DOM，实现了根据上级选项动态更新下级选项的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建测试XML文件:select.xml

<?xml version="1.0" encoding="GBK"?>
<select>
    <province id="sx">
        陕西
        <city id="xa">西安</city>
        <city id="bj">宝鸡</city>
        <city id="ak">安康</city>
    </province>
    <province id="js">
        江苏
        <city id="nj">南京</city>
        <city id="xz">徐州</city>
    </province>
    <province id="sh">
        上海
    </province>
</select>

2.创建HTML页面:select.html

<body>

</body>
<script>...
    /**//**
     * @description 二级级联下拉
     * @author BluesLee
     * @lastModif BluesLee
     * @createDate 2007-10-13
     * @modifDate 2007-10-15
      * @version 1.0
     */
    SelectLevel.prototype.xml;
    SelectLevel.prototype.provinces;
    SelectLevel.prototype.parentName="province";//父节点名称
    SelectLevel.prototype.childName="city";//子节点名称
    SelectLevel.prototype.keyName="id";//属性
    /**//**
     * 对象SelectLevel的构造器
     * @author BluesLee
     * @lastModif BluesLee
     * @createDate 2007-10-13
     * @modifDate 2007-10-15
      * @version 1.0
     */
    function SelectLevel(parentName,childName,keyName)...{
        if(parentName!=null && parentName!="")...{
            this.parentName=parentName;
        }
        if(childName!=null && childName!="")...{
            this.childName=childName;
        }
        if(keyName!=null && keyName!="")...{
            this.keyName=keyName;
        }
    }
    /**//**
     * 加载xml文件
     * @author BluesLee
     * @lastModif BluesLee
     * @createDate 2007-10-13
     * @modifDate 2007-10-15
      * @version 1.0
     */
    SelectLevel.prototype.readXML=function(url)...{
        var selectXML;
        //如果它受支持，采用标准的2级DOM技术
        if(document.implementation && document.implementation.createDocument)...{
            //创建新的Document对象
            selectXML=document.implementation.createDocument("","",null);
            //设置装载完毕时触发事件
            selectXML.οnlοad=function()...{
                alert("加载完成");
            }
            selectXML.load(url);
        }else...{//IE浏览器创建Document对象
            selectXML=new ActiveXObject("Microsoft.XMLDOM");
            //设置onload
            selectXML.onreadystatechange=function()...{
                if(selectXML.readyState==4)...{
                    alert("加载完成");
                }
            }
            selectXML.load(url);
        }
        this.xml=selectXML;
    }
    /**//**
     * 遍历xml
     * @author BluesLee
     * @lastModif BluesLee
     * @createDate 2007-10-13
     * @modifDate 2007-10-15
      * @version 1.0
     */
    SelectLevel.prototype.iteratorXML=function(node,level)...{
        var n=node;
        if(n==null)...{
            n=this.xml.documentElement;
        }

        if(level==null)...{
            level=0;
        }
        if(n.nodeType==3)...{
            for(var i=0;i<level;i++)...{
                document.write("-");
            }
            document.write(n.data.trim()+"<br>");
        }else...{
            for(var m=n.firstChild;m!=null;m=m.nextSibling)...{
                this.iteratorXML(m,level+1);
            }
        }
    }
    /**//**
     * 下拉联动
     * @author BluesLee
     * @lastModif BluesLee
     * @createDate 2007-10-13
     * @modifDate 2007-10-15
      * @version 1.0
     */
    SelectLevel.prototype.changeSelect=function()...{
        var city=document.getElementById(this.childName);
        var province=document.getElementById(this.parentName);
        city.options.length=0;

        if(province.value==null || province.value=="")...{
            city.options.length=1;
            city.options[0].text="请选择…";
            return;
        }

        var citys=this.provinces[this[province.value]].getElementsByTagName(this.childName);
        if(citys.length==0)...{
            city.options.length=city.options.length+1;
            city.options[city.options.length-1].value=province.value;
            for(var i=0;i<province.options.length;i++)...{
                if(province.options[i].selected)...{
                    city.options[city.options.length-1].text=province.options[i].text;
                    return;
                }
            }
            return;
        }
        city.options.length=citys.length;
        for(var i=0;i<citys.length;i++)...{
            city.options[i].value=citys[i].getAttribute(this.keyName);
            city.options[i].text=citys[i].firstChild.data.trim();
        }
    }
    /**//**
     * 初始化下拉列表
     * @author BluesLee
     * @lastModif BluesLee
     * @createDate 2007-10-13
     * @modifDate 2007-10-15
      * @version 1.0
     */
    SelectLevel.prototype.init=function(parent,province,city)...{
        this.provinces=this.xml.getElementsByTagName(this.parentName);
        var selectProvince=document.createElement("select");
        var selectCity=document.createElement("select");
        var obj=this;

        selectProvince.setAttribute("name",this.parentName);
        selectProvince.setAttribute("id",this.parentName);
        selectProvince.attachEvent("onchange",function()...{obj.changeSelect();});
        selectProvince.options.length=this.provinces.length+1;
        selectProvince.options[0].text="请选择…";

        selectCity.setAttribute("name",this.childName);
        selectCity.setAttribute("id",this.childName);
        selectCity.options.length=1;
        selectCity.options[0].text="请选择…";
        for(var i=0;i<this.provinces.length;i++)...{
            SelectLevel.prototype[this.provinces[i].getAttribute(this.keyName)]=i;
            selectProvince.options[i+1].value=this.provinces[i].getAttribute(this.keyName);
            selectProvince.options[i+1].text=this.provinces[i].firstChild.data.trim();
            if(this.provinces[i].getAttribute(this.keyName)==province)...{
                selectProvince.options[i+1].selected=true;
                var citys=this.provinces[i].getElementsByTagName(this.childName);
                selectCity.options.length=citys.length+1;
                for(var j=0;j<citys.length;j++)...{
                    selectCity.options[j+1].value=citys[j].getAttribute(this.keyName);
                    selectCity.options[j+1].text=citys[j].firstChild.data.trim();
                    if(citys[j].getAttribute(this.keyName)==city)...{
                        selectCity.options[j+1].selected=true;
                    }
                }
            }
        }
        parent.appendChild(selectProvince);
        parent.appendChild(selectCity);
    }

    String.prototype.trim=function()...{
        return this.replace(/^s*/g,"").replace(/s*$/g,"");
    }
    //测试
    var newXML=new SelectLevel();
    newXML.readXML("select.xml");
    //newXML.iteratorXML(null,-2);
    newXML.init(document.body,"sx","bj");
</script>