js实现Ajax三级联动,省市区

最新推荐文章于 2024-04-26 17:07:18 发布

西二旗搬砖人

最新推荐文章于 2024-04-26 17:07:18 发布

阅读量425

点赞数

分类专栏： Ajax 文章标签： js实现Ajax三级联动省市区 js ajax 三级联动

本文链接：https://blog.csdn.net/qq_36388734/article/details/97386470

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先我们先看样例:
在这里插入图片描述
相信样例已经看过了,那我们上代码:`

<meta charset="UTF-8">
<title>address html-初始化省份</title>
<script>

    window.onload = inint;
    var docXml = null;
    var city = null;

    function selectcity(cv) {
        document.getElementById("piecearea").options.length = 1;
        for (var i = 0; i < city.length; i++) {
            if (city[i].getAttribute("value") == cv) {
                var area = city[i].getElementsByTagName("piecearea");
                for (var j = 0; j < area.length; j++) {
                    var option = document.createElement("option");   //创建一个 option
                    option.text = area[j].getAttribute("name");  //设置显示的值
                    option.value = area[j].getAttribute("value"); //设置value属性值
                    document.getElementById("piecearea").options.add(option);
                }
            }
        }
    }

    function selectPro(pv) {
        document.getElementById("city").options.length = 1;
        var obj = docXml.getElementsByTagName("province");
        for (var i = 0; i < obj.length; i++) {
            if (obj[i].getAttribute("value") == pv) {
                city = obj[i].getElementsByTagName("city");
                for (var j = 0; j < city.length; j++) {
                    var option = document.createElement("option");   //创建一个 option
                    option.text = city[j].getAttribute("name");  //设置显示的值
                    option.value = city[j].getAttribute("value"); //设置value属性值
                    document.getElementById("city").options.add(option);
                }
            }
        }
    }

    function inint() {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "area.xml", true);
        xhr.onreadystatechange = function () {
            if (xhr.status == 200 && xhr.readyState == 4) {
                docXml = xhr.responseXML;
                var obj = docXml.getElementsByTagName("province");
                for (var i = 0; i < obj.length; i++) {
                    var option = document.createElement("option");   //创建一个 option
                    option.text = obj[i].getAttribute("name");  //设置显示的值
                    option.value = obj[i].getAttribute("value"); //设置value属性值
                    document.getElementById("province").options.add(option);
                }
            }

        };
        xhr.send();
    }

</script>

</head>
<body>
<select name="province" id="province" onchange="selectPro(this.value)">
    <option value="">请选择省份</option>
</select>
<select name="city" id="city" onchange="selectcity(this.value)">
    <option value="">请选择城市</option>
</select>
<select name="piecearea" id="piecearea">
    <option value="">请选择区县</option>
</select>
</body>
</html>

下载地址;https://download.csdn.net/my

西二旗搬砖人

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js实现Ajax三级联动,省市区

首先我们先看样例:相信样例已经看过了,那我们上代码:`<meta charset="UTF-8"><title>address html-初始化省份</title><script> window.onload = inint; var docXml = null; var city = null; f...
复制链接

扫一扫