ajax三级联动

最新推荐文章于 2021-12-31 16:58:27 发布

zy1207757535

最新推荐文章于 2021-12-31 16:58:27 发布

阅读量219

点赞数

CC 4.0 BY-SA版权

文章标签： ajax

本文链接：https://blog.youkuaiyun.com/zy1207757535/article/details/77688841

<script type="text/javascript">
    (function(){
        var docXMl;
        var province;
        var citys;
        //上面的是Area.xml文件中的
        var pro1;
        var city1;
        var country1;
        window.onload=function(){
            //异步问题注意
            initProvince();
            pro1= document.getElementById("province");
            pro1.onchange=getCity;
            city1=document.getElementById("city");
            city1.onchange=getCountry;

        }
        function getCountry(){
            var cityValue=this.value;
            var citycs=docXMl.getElementsByTagName("city");
            for(var i=0;i<citycs.length;i++) {
                if (citycs[i].getAttribute("value") == cityValue) {
                    var city2 = citycs[i];
                    break;
                }
            }
            var countryss=city2.getElementsByTagName("country");
            country1=document.getElementById("country");
            country1.options.length=1;
            for(var j=0;j<countryss.length;j++){
                var element=document.createElement("option");
                element.text=countryss[j].getAttribute("name");
                element.value=countryss[j].getAttribute("value");
                country1.add(element);
            }
        }
        function getCity(){
            var proValue=this.value;
            for(var i=0;i<province.length;i++){
                if(province[i].getAttribute("value")==proValue){
                    var pro2=province[i];
                    break;
                }
            }
            citys=pro2.getElementsByTagName("city");
            city1=document.getElementById("city");
            country1=document.getElementById("country");
            city1.options.length=1;
            country1.options.length=1;
            for(var j=0;j<citys.length;j++){
                var element=document.createElement("option");
                element.text=citys[j].getAttribute("name");
                element.value=citys[j].getAttribute("value");
                city1.add(element);
            }
        }
        function initProvince(){
            var xhr=CreateXmlHttpServlet();
            xhr.open("POST","Area.xml",true);
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                   docXMl=xhr.responseXML;
                    province=docXMl.getElementsByTagName("province");
                    pro1=document.getElementById("province");
                    for(var i=0;i<province.length;i++){
                        var element=document.createElement("option");
                        element.text=province[i].getAttribute("name");
                        element.value=province[i].getAttribute("value");
                        pro1.add(element);
                    }
                }
            }
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send();
        }
        function CreateXmlHttpServlet(){
            if(window.XMLHttpRequest){
                return new XMLHttpRequest();
            }else{
                return new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
    })();
</script>