搜 索

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

  • 495阅读
  • 2022年02月23日
  • 0评论
首页 / 生活随笔 / 正文

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 1000px;
            margin: 100px auto;
            text-align: center;
        }

        select {
            width: 200px;
            height: 36px;
            font-size: 24px;
            outline: none;
        }
    </style>
</head>

<body>

    <div class="wrap">
        <select id="province">
            <option>--请选择--</option>
        </select>
        <select id="city">
            <option>--请选择--</option>
        </select>
        <select id="area">
            <option>--请选择--</option>
        </select>
    </div>
    <!-- 引入数据 -->
    <script src="./js/data.js"></script>

    <script>
        // 获取省选项
        let province = document.querySelector('#province');
        // 获取城市选项
        let city = document.querySelector('#city');
        // 获取区域选项
        let area = document.querySelector('#area');


        // 封装一个item用来遍历数据
        function Item(data, name) {
            // 循环遍历数据
            data.map((item) => {
                // item.name就是获取每个省会
                name.innerHTML += `<option>${item.name}</option>`;
            })
        }
        // 渲染省
        Item(data, province)

        let provinceText = '';

        // 离开省选项就获取对应被选中的值
        province.onblur = function () {
            city.innerHTML = '<option>--请选择--</option>';
            area.innerHTML = '<option>--请选择--</option>';

            // 获取选项框被选中的选项索引号
            let index = province.selectedIndex;
            // 得到被选中的那个选项值
            let text = province[index].text;
            provinceText = text;

            data.map((item) => {
                // 找出被选中的那个值匹配的对象
                if (item.name == text) {
                    // 用来临时存储每个对象
                    let arr = [];
                    // 再获取他的市辖区/县/城市
                    item.cityList.map((item) => {
                        // 将每个对象临时存储给arr这个数组
                        arr.push(item);
                        // 渲染城市
                        Item(arr, city);

                        // 每次循环结束后就清空
                        arr = [];
                    })

                    // 找到了就不让他在继续循环下去了,可优化代码性能
                    return true;
                }
            });
        }

        // 离开城市选项就获取对应被选中的值
        area.onfocus = function () {
            area.innerHTML = '<option>--请选择--</option>';

            // 获取选项框被选中的选项索引号
            let index = city.selectedIndex;
            // 得到被选中的那个选项值
            let text = city[index].text;
            console.log(text);

            data.map((item) => {
                if (item.name == provinceText) {
                    item.cityList.map((item) => {
                        console.log(item);
                        if (item.name == text) {
                            console.log(item);
                            console.log(provinceText);
                            // 用来临时存储每个对象
                            let arr = [];
                            // 再获取他的市辖区/县/城市
                            item.areaList.map((item) => {
                                area.innerHTML += `<option>${item}</option>`;
                            })

                            // 找到了就不让他在继续循环下去了,可优化代码性能
                            return true;
                        }
                    })
                }
            });
        }

    </script>
</body>

</html>

三级连动.zip

无标签
评论区
暂无评论
avatar