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

拼搏现实的明天。 2021-11-22 03:14 594阅读 0赞

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

<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][https_download.csdn.net_my]**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Mzg4NzM0_size_16_color_FFFFFF_t_70]: /images/20211122/1479f8c7ad5444ea884e71c156043b0f.png
[https_download.csdn.net_my]: https://download.csdn.net/my

发表评论取消回复

表情：

评论列表（有 0 条评论，594人围观）

还没有评论，来说两句吧...

相关阅读

相关省市区三级联动

**目录** 省市区三级联动 1.1、省份的获取和显示 1.2、市的获取和显示 1.3、县区的获取与显示 1.4、接口 1.41、获取省份 1.42、获...

分手后的思念是犯贱/ 2024年04月17日 21:39/ 0 赞/ 138 阅读

相关 JS实现省市区三级联动

目标：用JS实现省市区的三级联动效果 -------------------- 学习内容： 1. 掌握JS对DOM元素的获取 2. 掌握 JS对DO

àì夳堔傛蜴生んèń/ 2024年04月08日 12:46/ 0 赞/ 84 阅读

相关 jquery实现省市区三级联动

jquery实现省市区三级联动 -------------------- 实现的图片先附上 ![在这里插入图片描述][watermark_type_ZmFuZ3po

约定不等于承诺〃/ 2023年06月09日 12:27/ 0 赞/ 183 阅读

相关 ajax省市区三级联动

jdbc+servlet+ajax开发省市区三级联动技术点：jdbc操作数据库，ajax提交，字符拦截器，三级联动特点：局部刷新达到省市区三级联动，举一反三可以做商品分

Love The Way You Lie/ 2022年08月18日 11:54/ 0 赞/ 383 阅读

相关 js 省市区三级（二级）联动

1,最近项目用到了省市区三级联动，起初想通过json的方式来实现，无意中碰到了这个，还挺好用的，记录下来，方便自己也方便别人。 2，因为项目前台框架为bootstrap所以没

清疚/ 2022年07月17日 03:28/ 0 赞/ 357 阅读

相关 ajax省市区三级联动

本文思路页面加载时通过ajax向后台请求省级数据，通过onchange事件，根据选择的省向后台请求市级数据，同样添加onchange事件，根据市向后台请求区级数据。 htm

快来打我*/ 2022年07月14日 17:13/ 0 赞/ 402 阅读

相关 SpringMVC，ajax实现省市区三级联动

SpringMVC，ajax实现省市区三级联动一、实现思路 1、请求 url：/province ，通过 Model 默认加载省份数据， 2、用change

缺乏、安全感/ 2022年06月03日 02:51/ 0 赞/ 292 阅读

相关省市区三级联动

下载地址：[https://download.csdn.net/download/qzc2017/10879818][https_download.csdn.net_downl

谁借莪１个温暖的怀抱￠/ 2022年04月02日 15:22/ 0 赞/ 565 阅读

相关 HTML+JS实现省市区三级联动

在线调试预览 https://codepen.io/acelibin/pen/wGooev 1.html代码 <html> <head></

﹏ヽ暗。殇╰゛Y/ 2021年12月11日 05:05/ 0 赞/ 712 阅读

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

首先我们先看样例: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

拼搏现实的明天。/ 2021年11月22日 03:14/ 0 赞/ 595 阅读