原生JS实现三级联动下拉地区列表

哈哈,搞了两节课。先看一下效果:
2.gif

代码演示

这是纯JS代码,地区代码在见下方完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./data.js"></script>
    <style>
        select {
            height: 40px;
            margin: 0 5px;
            padding: 10px;
            color: #666;
            border: 1px solid #c0c4cc;
            border-radius: 4px;
            transition: all 0.5s;
            outline: none;
        }

        select:hover {
            border: 1px solid #409dfe;
        }
    </style>
</head>

<body>
    <div style="width: 500px;color: #666;margin: 50px auto;">
        省:<select class="sheng">
            <option>-请选择-</option>
        </select>
        市:<select class="shi">
            <option>-请选择-</option>
        </select>
        区:<select class="qu">
            <option>-请选择-</option>
        </select>
    </div>

    <script>
        // 省
        var sheng = document.querySelector('.sheng');
        // 市
        var shi = document.querySelector('.shi');
        // 区
        var qu = document.querySelector('.qu');

        // 渲染省
        for (var i = 0; i < data.length; i++) {
            // 创建一个option
            var opt = document.createElement('option');
            // 赋值给它
            opt.innerHTML = data[i].name; //data[i].name就是所有的省名称
            // 添加到省的这个下拉列表里
            sheng.appendChild(opt);

            // 鼠标离开省这个列表就会触发表单失去焦点事件:也就意味着选好省了
            sheng.onblur = function () {
                // 循环
                for (var i = 0; i < data.length; i++) {
                    // 用selectedIndex属性可以获取被选中的那个option的索引下标
                    // 比如选择的省是:河南 。那么this[this.selectedIndex].value就得到的是河南
                    // 循环找出选择的河南这个省
                    if (this[this.selectedIndex].value == data[i].name) {
                        // 每查找一次就先将之前的option元素清除,不然会叠加在一块
                        shi.innerHTML = '<option>-请选择-</option>';
                        // 将他的城市循环遍历出来,有多少个城市就遍历多少次
                        for (var j = 0; j < data[i].cityList.length; j++) {
                            // 创建option
                            var opt = document.createElement('option');
                            // 赋值给它
                            // 此时:
                            // data[i] = 河南
                            // cityList[j].name = 河南所有的城市
                            opt.innerHTML = data[i].cityList[j].name
                            // 最后赋值
                            shi.appendChild(opt);
                        }
                    }
                }
            }
        }

        // 循环遍历城市的区域,比如当前市是郑州
        shi.onblur = function () {
            for (var i = 0; i < data.length; i++) {
                // 有多少城市就循环多少次
                for (var j = 0; j < data[i].cityList.length; j++) {
                    // this[this.selectedIndex].value = 郑州
                    // 循环找到指定的郑州这个城市 data[i].cityList[j].name
                    if (this[this.selectedIndex].value == data[i].cityList[j].name && sheng[sheng.selectedIndex].value == data[i].name) {
                        qu.innerHTML = '<option>-请选择-</option>';
                        // 如果找到郑州就满足条件就将郑州所有地区赋值即可
                        for (var k = 0; k < data[i].cityList[j].areaList.length; k++) {
                            var opt = document.createElement('option');
                            // data[i].cityList[j].name = 所有城市
                            // data[i].cityList[j].areaList[k] = 所有地区
                            opt.innerHTML = data[i].cityList[j].areaList[k];
                            qu.appendChild(opt);
                        }
                    }
                }
            }
        }
    </script>
</body>

</html>

完整代码

三级联动下拉地区列表.zip

无标签
评论区
头像