三级联动案列

最新推荐文章于 2021-04-18 22:06:47 发布

so_#

最新推荐文章于 2021-04-18 22:06:47 发布

阅读量2.5k

点赞数

分类专栏：案例

Jine

本文链接：https://blog.csdn.net/weixin_42760849/article/details/108461539

版权

案例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

案列分析

思路

建立核心对象

在这里插入图片描述

主要用到了Ajax异步交互数据

客户端创建Ajax核心对象，和服务器进行连接及交互数据，如下：

//1、创建XMLTHttpRequest对象
var xml=createXMLHttpRequest()
            
//2、调用XMLHttpRequest对象的open（）方法
//与服务器建立连接
xml.open('get','xxxxxxxxx')

//3、监听事件
xml.onreadystatechange=()=>{
    //xxxxxx
    
    //数据交互过程中需要将json字符串转为json对象
}

//4、发送数据(get方法没有请求体，所以传送null数据)
xml.send(null)

联动思想

在这里插入图片描述

1、获取到各个选项框（利用dom操作）

2、通过Ajax对象建立和服务器中JSON数据的连接

3、获取到的Json数据的省份名称，添加到选项文本节点中

4、同时为用户所选择的省份选项框设置onchange事件用来监听，从而用来修改对应的下一个市级选项框

5、获取用户当前点击省份选项框的文本节点内容，查找JSON数据中对应的省市区级关系

6、将找到对应关系的json数据内容，动态创建选项框并添加到对应的市级选项框文本节点中



//以上是二级联动思想，而三级联动便是俩个二级联动构成

//可以说是，省级选项框和市级选项框绑定，而市级选项框和区级选项框绑定

代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三级联动</title>
</head>
<body>
<!--    三级联动 - 是两个二级联动-->
<select name="sheng" id="province">
    <option value="">----</option>
</select>
<select name="shi" id="city">
    <option value="">-----</option>
</select>
<select name="qu" id="counties">
    <option value="">-----</option>
</select>

<script>
    // ----获取省份、城市下拉列表-----
    var provinceElement = document.getElementById('province')
    var cityElement = document.getElementById('city')
    var datas;

    // ------当页面加载完毕后，动态获取省份信息----

    //创建xml服务
    var xhr = createXMLHttpRequest();

    //----监听服务器事件-----
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200){
            // 得到服务器端返回的数据
            var response = xhr.responseText;
            // 将JSON字符串换成JSON对象
            datas =  JSON.parse(response)
            
            // 得到数组类型的对象 - 遍历

            for (var i = 0; i < datas.length; i++){
                var data = datas[i];
                
                //获取省份
                var province = data.province
                
                //----- 将数据更新到HTML页面当中-----
                
                //创建opt选项
                var opt = document.createElement('option')
                //设置属性value，与之对应的省份
                opt.setAttribute('value',province);
                //设置选项的文本节点
                opt.textContent = province;
                //将opt选型加入指定省份中
                provinceElement.appendChild(opt)

            }
        }
    }
    //连接服务器
    xhr.open('get','server.json');
    //发送空数据
    xhr.send(null);

    //为省份下拉列表绑定change事件
    provinceElement.addEventListener('change',function () {
        // 将城市下拉列表的选项清空
        var cityOpts = cityElement.options;
        //循环遍历城市选项框，每次清空
        for (var k = 1;k < cityOpts.length; k++){
            cityElement.removeChild(cityOpts[k])
            k--;
        }
        // 1.用户选择的省份信息是什么
        var opts = provinceElement.options;  //获取指定下拉列表所有选项
        var index = provinceElement.selectedIndex; //被选中<option>的索引值
        //获取当前opt的索引值
        var opt = opts.item(index);
        //获取当前选项的名字
        var provinceName = opt.getAttribute('value');

        // 2. 根据当前获取的省份信息来获取对应的城市信息
        for (var i = 0; i < datas.length; i++){
            data = datas[i];
            //获取当前的省份
            var province = data.province;
            //判断选择的省份是否和json数据中的相同，进行查找对应的值
            if (provinceName === province){
                
                // 获取对应的城市信息
                var cities = data.cities;

                //循环遍历城市
                for (var j = 0; j<cities.length;j++){
                    //获取对应的城市
                    var city = cities[j].city;
                    // 将城市信息更新到HTML页面
                    var opt = document.createElement('option')
                    opt.setAttribute('value',city);
                    opt.textContent = city;

                    cityElement.appendChild(opt)
                }
            }
        }
    })



    //创建xml对象的方法
    function createXMLHttpRequest() {
        var httpRequest;
        if (window.XMLHttpRequest) { //适用于Chrome，Firefox，Safari，...
            httpRequest = new XMLHttpRequest();
        } else if (window.ActiveXObject) {  //适用于IE浏览器
            try {
                httpRequest = new ActiveXObject("Msxml2.XMLHTTP") // IE 7+
            } catch (e) {
                try {
                    httpRequest = new ActiveXObject("Microsoft.XMLHTTP") // 6-
                } catch (e) { }
            }
        }
        return httpRequest;
    }
</script>
</body>
</html>

so_#

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三级联动案列

案列分析思路建立核心对象主要用到了Ajax异步交互数据客户端创建Ajax核心对象，和服务器进行连接及交互数据，如下：//1、创建XMLTHttpRequest对象var xml=createXMLHttpRequest() //2、调用XMLHttpRequest对象的open（）方法//与服务器建立连接xml.open('get','xxxxxxxxx')//3、监听事件xml.onreadystatechange=()=>{ //xxx
复制链接

扫一扫